Node Sassのバージョン互換性エラーと解決策

問題の概要

ReactプロジェクトでSCSSファイルをインポートしようとすると、以下のエラーが発生します：

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

このエラーは、node-sassバージョン5.0.0とsass-loaderの互換性の問題によって発生します。sass-loaderが期待するnode-sassのバージョン（^4.0.0）と、実際にインストールされたバージョン（5.0.0）に不一致があるためです。

根本原因

技術的背景

この問題の根本原因は、node-sass（LibSass）のメジャーバージョンアップによる変更と、それに追従していないsass-loaderのバージョンとの互換性の問題です。2020年10月時点で、node-sassの最新バージョンは5.0.0でしたが、多くのビルドツールやフレームワーク（Create React Appなど）がまだ4.x系のsass-loaderを使用していたため、この互換性エラーが発生しました。

解決策

推奨解決策：Dart Sassへの移行

最も適切で将来性のある解決策は、非推奨となったnode-sass（LibSass）から、公式推奨のsass（Dart Sass）に移行することです。

npm

npm uninstall node-sass
npm install sass --save-dev

Yarn

yarn remove node-sass
yarn add sass --dev

重要

Dart Sass（単にsassと呼ばれるパッケージ）は、Node Sassの公式後継です。 以下の利点があります：

• 最新のSass機能をサポート
• アクティブにメンテナンスされている
• 純粋なJavaScriptで実装されているため、ネイティブバイナリに依存しない

代替解決策：互換性のあるNode Sassバージョンの使用

どうしてもnode-sassを使用する必要がある場合、互換性のあるバージョンにダウングレードする方法もあります：

npm

npm uninstall node-sass
npm install node-sass@4.14.1

Yarn

yarn remove node-sass
yarn add node-sass@4.14.1

注意

Node.jsのバージョンとnode-sassのバージョンにも互換性が必要です。以下は主要な互換性対応表です：

Node.js バージョン	推奨 node-sass バージョン
Node 16	6.0+
Node 15	5.0+
Node 14	4.14+
Node 13	4.13+
Node 12	4.12+

sass-loaderのアップデート

プロジェクトで直接sass-loaderを制御できる場合（Create React Appを使用していない場合）、最新版のsass-loader（v10.0.5以上）にアップデートすることで問題が解決する可能性があります：

npm install sass-loader@^10.0.5

トラブルシューティング

解決策を適用しても問題が解決しない場合、以下の追加手順を試してください：

1. キャッシュのクリアと再インストール

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install

2. Visual Studio Codeを使用している場合の特別な対応

   EPREMエラーが発生する場合

   code EPERM
   npm ERR! syscall unlink

   このエラーが発生する場合：

   1. VS Codeを完全に終了
   2. node_modulesフォルダ内の.node-sass.DELETEファイルを手動で削除
   3. 再度インストールコマンドを実行

まとめ

解決策	推奨度	メリット	デメリット
Dart Sassへ移行	⭐⭐⭐⭐⭐	公式推奨、将来性がある	若干の構文違いがある可能性
Node Sass 4.14.1を使用	⭐⭐	簡単な修正	非推奨、古い機能
sass-loader更新	⭐⭐⭐	最新機能を使用可能	環境による

最良の解決策: 非推奨となったnode-sassから公式推奨のsass（Dart Sass）への移行をお勧めします。これは長期的な互換性とメンテナンス性を確保する最も確実な方法です。