create-react-appでSASSファイルを使う方法

以前までは「PostCSS推奨」みたいな方針だったせいか、SASS(SCSS)ファイルは使えなかったので、
npm ejectしたものをゴニョゴニョして無理やり使ってたんだけど、公式のGithubの方にいつの間にか
SASS(SCSS)ファイルに対応する方法が載ってたので、忘れないようにメモ。

詳細はここに載ってるよ。（英語だけど。）

create-react-appコマンドで作成した雛形ファイルの中（package.jsonがあるディレクトリ）で以下のパッケージをインストール

npm install node-sass-chokidar --save-dev

「node-sass-chokidar」と言うのは、SASS(SCSS)ファイルの変更を監視して、node-sassでコンパイルを行ったりすることが出来るラッパーライブラリらしい。

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)ファイルのコンパイルを行ってくれない。。。
なので、以下のパッケージとコマンドも追加。

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資産もまだまだ使いたいから、とりあえず、これでしばらくは困らないだろう。