[React]Reactでnode-sassを使おうと思ったら躓いた話[Node]

Create React AppでReactプロジェクトを作り、SCSSを使おう!と思ってnode-sassをインストールしたら以下のエラー。

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

v5を使うとコンパイルできなくなる。

そこでこの記事(https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0)を参考に過去のバージョンをインストールする。

yarn add node-sass@4.14.1

無事動いたが、直後に以下の記事を見つける。

https://qiita.com/n0bisuke/items/123a69ba5940f11404aa

node-sassはDeprecatedになるとのことで、今から使うのは今から導入するのは賢くないね・・・ということで、dart-sassを導入する。

yarn remove node-sass
yarn add -D sass sass-loader

これだけで、SCSSやSASSファイルを扱える。

ちなみに、Create React Appを使っている場合はこの時点でCSS Modulesが使える。