create-react-appでSass（.scss）を使う手順を調べた結果メモ。
以下、手順です。
npm install sassでSassコンパイラーをインストールする- プロジェクト内にある
.cssファイルをすべて.scssに書き換える
たったこれだけでSassが使えるようになります。
自前でwebpackで設定する場合と比べると、めちゃくちゃ楽ちんですね。
ちなみにググってみると、npm install node-sassでSassコンパイラをインストールすると書いているブログが多いですが、今現在はnode-sassは非推奨らしいです。
- Sassコンパイラーには、
dart-sassとnode-sassの2種類があるらしいのですが、今現在（2021年5月）は、dart-sassの使用が推奨されているらしいです。（node-sassのページに書いてます） dart-sassのパッケージ名はsassです
以下、仕組みについての補足です。
create-react-appは、webpackのsass-loaderを使ってSassをバンドルするsass-loaderは、dart-sassとnode-sassの2つがインストールされている場合は、node-sassの方を優先する。（2021年5月現在、sass-loaderのREADME.mdに書いてます）- ただし、オプションによっては
dart-sassの方を優先することもできる。（implementationというオプションを使えばいいらしい）
- ただし、オプションによっては
おわり
コメント