【npmでエラー】node-sass command failedの対応方法

Node

node
ミニマリスト_カミ

kamiです。
TwitterとYoutubeもやってます。

今回は「【npmでエラー】node-sass command failedの対応方法」について解説です。

node-sass command failedとは？

「npm install」や「npm run dev」などのnpmコマンドで、node-sassでcommand failedとエラーの解消についての紹介になります。

npmのエラーの確認

npmコマンド実行後のエラーの確認です。
一番下にある「A complete log of this run can be found in: /Users/ユーザー名/.npm/_logs/2024-02-28T14_37_37_464Z-debug-0.log」にログの全ての記録があります。

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: eslint-plugin-vue@6.2.2
npm WARN Found: eslint@7.32.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^7.5.0 || ^8.0.0" from @babel/eslint-parser@7.24.1
npm WARN   node_modules/@babel/eslint-parser
npm WARN     @babel/eslint-parser@"^7.12.16" from eslint-template-visitor@2.3.2
npm WARN     node_modules/eslint-template-visitor
npm WARN   17 more (@nuxtjs/eslint-config, @nuxtjs/eslint-module, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^5.0.0 || ^6.0.0" from eslint-plugin-vue@6.2.2
npm WARN node_modules/eslint-plugin-vue
npm WARN   eslint-plugin-vue@"^6.2.2" from @nuxtjs/eslint-config@3.1.0
npm WARN   node_modules/@nuxtjs/eslint-config
npm WARN   2 more (@nuxtjs/eslint-config, eslint-plugin-nuxt)
npm WARN 
npm WARN Conflicting peer dependency: eslint@6.8.0
npm WARN node_modules/eslint
npm WARN   peer eslint@"^5.0.0 || ^6.0.0" from eslint-plugin-vue@6.2.2
npm WARN   node_modules/eslint-plugin-vue
npm WARN     eslint-plugin-vue@"^6.2.2" from @nuxtjs/eslint-config@3.1.0
npm WARN     node_modules/@nuxtjs/eslint-config
npm WARN     2 more (@nuxtjs/eslint-config, eslint-plugin-nuxt)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: postcss-loader@8.1.1
npm ERR! Found: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0" from @nuxt/friendly-errors-webpack-plugin@2.6.0
npm ERR!   node_modules/@nuxt/friendly-errors-webpack-plugin
npm ERR!     @nuxt/friendly-errors-webpack-plugin@"^2.6.0" from @nuxt/webpack@2.17.3
npm ERR!     node_modules/@nuxt/webpack
npm ERR!       @nuxt/webpack@"2.17.3" from @nuxt/builder@2.17.3
npm ERR!       node_modules/@nuxt/builder
npm ERR!         @nuxt/builder@"2.17.3" from nuxt@2.17.3
npm ERR!         node_modules/nuxt
npm ERR!       1 more (nuxt)
npm ERR!   peer webpack@">=2" from babel-loader@8.3.0
npm ERR!   node_modules/babel-loader
npm ERR!     babel-loader@"^8.3.0" from @nuxt/webpack@2.17.3
npm ERR!     node_modules/@nuxt/webpack
npm ERR!       @nuxt/webpack@"2.17.3" from @nuxt/builder@2.17.3
npm ERR!       node_modules/@nuxt/builder
npm ERR!         @nuxt/builder@"2.17.3" from nuxt@2.17.3
npm ERR!         node_modules/nuxt
npm ERR!       1 more (nuxt)
npm ERR!   17 more (css-loader, eslint-loader, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional webpack@"^5.0.0" from postcss-loader@8.1.1
npm ERR! node_modules/postcss-loader
npm ERR!   dev postcss-loader@"8.1.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: webpack@5.91.0
npm ERR! node_modules/webpack
npm ERR!   peerOptional webpack@"^5.0.0" from postcss-loader@8.1.1
npm ERR!   node_modules/postcss-loader
npm ERR!     dev postcss-loader@"8.1.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/kami/.npm/_logs/2024-02-28T14_37_37_464Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /Users/kami/.npm/_logs/2024-02-28T14_37_37_464Z-debug-0.log

スポンサードサーチ

ログファイルのエラーの原因

ログファイルに記載があるエラーの問題点をおさえます。
今回であれば、248行目にエラーが記載されています。

248 error While resolving: sass-loader@8.0.2
248 error Found: node-sass@8.0.0
248 error node_modules/node-sass
248 error   dev node-sass@"^8.0.0" from the root project
...
248 error Could not resolve dependency:
248 error peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2
248 error node_modules/sass-loader
248 error   dev sass-loader@"8.0.2" from the root project
...
248 error Conflicting peer dependency: node-sass@4.14.1
248 error node_modules/node-sass
248 error   peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2

エラーの原因

「sass-loader@8.0.2」が「node-sass@^4.0.0」をpeer依存として要求しているにも関わらず、インストールされているnode-sassのバージョンが8.0.0であることが示されています。そのため、「sass-loader」の要求するバージョン範囲と現在の「node-sass」のバージョンが一致しないため、依存関係の衝突が発生していることが原因です。

sass-loader

「sass-loader」とは、WebpackというモジュールバンドラーでSass（Syntactically Awesome Style Sheets）というCSSプリプロセッサのファイル（.scssや.sass形式）をコンパイルし、CSSに変換するためのLoaderです。
Webpackを使用しているプロジェクトでSassを使いたい場合、sass-loaderを設定ファイルに追加することで、Sassファイルの読み込みとコンパイルが可能になります。
sass-loaderは内部でnode-sassかdart-sassを使ってSassをコンパイルしますが、dart-sassが推奨されています。

node-sass

「node-sass」とは、LibSass（C/C++で書かれたSassのコンパイラ）のバインディングを提供するNode.jsのライブラリです。
これにより、Node.jsの環境で直接SassをCSSにコンパイルできます。
しかし、node-sassは非推奨となり、現在はdart-sass（Sassの公式実装であるDartベースのコンパイラ）の使用が推奨されています。
node-sassは性能面で有利であったものの、メンテナンスと互換性の問題から段階的に使用が減っています。

peer

「peer」とは、Node.jsのパッケージ管理で使用されます。
特に、peerDependencies（ピア依存関係）とは、あるパッケージが機能するために必要だが、それ自身では依存関係としてインストールされない他のパッケージを指します。
プラグインやテーマがホストされるパッケージの特定のバージョンと互換性があることを示すために使用されます。
開発者が手動でこれらのピア依存パッケージをプロジェクトに追加する必要があります。

スポンサードサーチ

エラーの対応

エラーについては、環境によって異なるので当てはまるものを試してみてください。

--legacy-peer-depsオプションを使用してインストール

「npm v7以降」では、依存関係の解決方法が変更されましたが、「--legacy-peer-depsオプション」を使用することで、以前のバージョンのnpmの挙動に戻して依存関係を無視してインストールを試みることができます

npm install --save-dev sass-loader@8.0.2 node-sass@^8.0.0 --legacy-peer-deps

node-sassのバージョンを下げる

「node-sass」を「sass-loader」の要求するバージョンに合わせてインストールする方法です。

npm install --save-dev sass-loader@8.0.2 node-sass@^4.0.0

sassへの移行を検討する

「node-sass」はlibsassに依存していますが、libsassは非推奨となっており、「sass（Dart Sass）」への移行が推奨されています。

npm install --save-dev sass-loader@8.0.2 sass

以上になります。

Node

Posted by kami