以前までは「PostCSS推奨」みたいな方針だったせいか、SASS(SCSS)ファイルは使えなかったので、
npm ejectしたものをゴニョゴニョして無理やり使ってたんだけど、公式のGithubの方にいつの間にか
SASS(SCSS)ファイルに対応する方法が載ってたので、忘れないようにメモ。
詳細はここに載ってるよ。（英語だけど。）
1.
create-react-appコマンドで作成した雛形ファイルの中（package.jsonがあるディレクトリ）で以下のパッケージをインストール
1 | npm install node-sass-chokidar --save-dev |
「node-sass-chokidar」と言うのは、SASS(SCSS)ファイルの変更を監視して、node-sassでコンパイルを行ったりすることが出来るラッパーライブラリらしい。
2.
package.jsonのscriptsの項目に以下のコマンドを追加。
1 2 | "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.
1 | npm install --save-dev npm-run-all |
1 2 3 4 5 6 7 8 9 10 11 | "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資産もまだまだ使いたいから、とりあえず、これでしばらくは困らないだろう。
