create-react-appでSassを使う手順

create-react-appでSass（.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というオプションを使えばいいらしい）