create-react-appで作成したreactアプリでscssを使おうとしたら、エラーが出たときのメモ
2022/03追記: node-sassでなくsassモジュールを使うべき（後述追記参照）
環境
package.jsonは次の通り:
"dependencies": {
// ...
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.2",
},こうするとエラー
CSSで同じクラス名をなんども書くのはいやなのでscssで楽したいなあと思った。
環境の構築の仕方は忘れたので、とりあえず.cssを.scssに変更して、内容もscssの書き方にした。
yarn startし直すと、当然エラー。しかしここではApp.jsでのcssファイルのインポートに失敗したという内容。なので、App.jsのインポートも.scssに変更。リコンパイルされると、今度こそ目当ての失敗。
メッセージをメモするのを忘れたが、node-sassモジュールが必要だよ、というような内容だった。なのでインストールする。コマンドは、yarn add node-sass。これでOKと思ったら、またコンパイル失敗。
現れたエラーは、Error: Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.というもの。
調べると、reactjs - Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 - Stack Overflowと同じ。 デフォルトでインストールしても互換性がないようだ。
バージョンを指定しよう
入れるnode-sassのバージョンを間違っていたというわけなので、一旦削除してバージョンを指定して入れ直せばいい。バージョンは、node-sass - npmのバージョンタブで確認した。上の同じ例とバージョンは変わってないようだ。
5.0.0と4.14.1のどっちがいいかは分からない。
よって:
# 互換性がないバージョンを削除
yarn remove node-sass
# 入れ直す
yarn add node-sass@4.14.1これでOK。scssファイルの拡張子とインポート関連の変更は忘れずに。
(追記) node-sassでなく、sassを使う
2022/03追記
Sass: LibSass is Deprecatedというアナウンスが2020/10にすでにあったので、上の方法もあまり良くないようだ。
Sass: Dart Sassを使って下さいとのことなので、これを使う。 モジュールの追加は、
# 既存のを削除
yarn remove node-sass
# sassだけでいい
yarn add -D sassでOK。同じインターフェースなのでそのまま使える。
おわり
デフォルトのCSSはかなり冗長がすぎる。正直scssくらいの書き方は対応してくれると、環境構築の手間がなくなってとても助かるのだが…
{}で括りたい派なのであまり他の書き方はしていない。
いつものことだが、エラーのメモはしっかり残しておこう。
今回は以上です。
Amazonアソシエイト
