Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

create-react-appしたアプリケーションでscssを使おうと思ったときにnode-sassのインストールに失敗した

はじめに

create-react-appしてアプリケーションを作りました。

node v16.10.0を使っていて、node-sass v6.0.1をインストールしました。

すると以下のようなエラーメッセージが表示されました。

Failed to compile
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.

一度removeしてインストールしようとしたら失敗

一度removeします。

yarn remove node-sass

ディレクトリを削除します。

rm -rf node_modules/node-sass

node-sass 5.0.0をインストールしようとしました。

yarn add node-sass@5.0.0

makeに失敗して以下のようなエラーが出ました。

1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/path/to/your/app/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/Users/you/.nodebrew/node/v16.10.0/bin/node" "/path/to/your/app/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /path/to/your/app/node_modules/node-sass
gyp ERR! node -v v16.10.0

nodeのバージョンを下げて再実行したら成功しました

nodeのバージョンをv16.10.0から、v15.6.0に下げて同じコマンドを実行しました。

一度removeします。

yarn remove node-sass

ディレクトリを削除します。

rm -rf node_modules/node-sass

node-sass 5.0.0をインストールします。

yarn add node-sass@5.0.0

node-sass@5.0.0 のインストールに成功しました。

2021年10月06日時点です。

nodeのバージョンは適宜調整されたら良いと思います。