以前までは「PostCSS推奨」みたいな方針だったせいか、SASS(SCSS)ファイルは使えなかったので、
npm ejectしたものをゴニョゴニョして無理やり使ってたんだけど、公式のGithubの方にいつの間にか
SASS(SCSS)ファイルに対応する方法が載ってたので、忘れないようにメモ。
詳細はここに載ってるよ。(英語だけど。)
1.
create-react-appコマンドで作成した雛形ファイルの中(package.jsonがあるディレクトリ)で以下のパッケージをインストール
npm install node-sass-chokidar --save-dev
「node-sass-chokidar」と言うのは、SASS(SCSS)ファイルの変更を監視して、node-sassでコンパイルを行ったりすることが出来るラッパーライブラリらしい。
2.
package.jsonのscriptsの項目に以下のコマンドを追加。
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
これで、npm run watch-css
を実行するとSASS(SCSS)ファイルを変更すると同じディレクトリにCSSファイルを作成してくれる。
ただ、今のままだと、npm run start
やnpm run build
を実行した時に、SASS(SCSS)ファイルのコンパイルを行ってくれない。。。
なので、以下のパッケージとコマンドも追加。
3.
npm install --save-dev npm-run-all
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
npm-run-all は npm-scripts の連結実行を管理するためのパッケージ。
これを使って、watch-css
とstart-js
のコマンドを連結実行することで、
SASS(SCSS)ファイルを更新した時にも全体の更新が実行される。
build
コマンドも同じ感じで、SASS(SCSS)ファイルのコンパイルを実行した後に、全体のビルドが実行される。
まぁ、SASS何かとっとと卒業して、PostCSSに移行したらいいんだろうけど、
SASS資産もまだまだ使いたいから、とりあえず、これでしばらくは困らないだろう。