Edited at

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

More than 1 year has passed since last update.

以前までは「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 startnpm 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-cssstart-jsのコマンドを連結実行することで、

SASS(SCSS)ファイルを更新した時にも全体の更新が実行される。

build コマンドも同じ感じで、SASS(SCSS)ファイルのコンパイルを実行した後に、全体のビルドが実行される。

まぁ、SASS何かとっとと卒業して、PostCSSに移行したらいいんだろうけど、

SASS資産もまだまだ使いたいから、とりあえず、これでしばらくは困らないだろう。