create-react-appでのアプリにnode-sassを入れた時のエラー

create-react-appで作成したreactアプリでscssを使おうとしたら、エラーが出たときのメモ

環境

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.04.14.1のどっちがいいかは分からない。

よって:

# 互換性がないバージョンを削除
yarn remove node-sass
# 入れ直す
yarn add node-sass@4.14.1

これでOK。scssファイルの拡張子とインポート関連の変更は忘れずに。

おわり

デフォルトのCSSはかなり冗長がすぎる。正直scssくらいの書き方は対応してくれると、環境構築の手間がなくなってとても助かるのだが…

{}で括りたい派なのであまり他の書き方はしていない。

いつものことだが、エラーのメモはしっかり残しておこう。

今回は以上です。


Amazonアソシエイト

React.js & Next.js超入門 | 掌田津耶乃 | 工学 | Kindleストア | Amazon
Amazonで掌田津耶乃のReact.js & Next.js超入門。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門 | Stoyan Stefanov, 牧野 聡 |本 | 通販 | Amazon
AmazonでStoyan Stefanov, 牧野 聡のReactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門。アマゾンならポイント還元本が多数。Stoyan Stefanov, 牧野 聡作品ほか、お急ぎ便対象商品は当日お届けも可能。またReactビギナーズガイド ―コンポーネントベースのフロント...
タイトルとURLをコピーしました