webpack5, sass-loaderはnode-sassのバージョンに影響される

webpackのプラグインsass-loaderは、同じくwebpackのプラグインnode-sassの拡張プラグインです。

当然ですが、node-sassに大きく影響される。

node-sassのバージョンを上げるとsass-loaderのインストールに失敗することがあります。

sass-loaderとnode-sassのバージョンが合わないと、このようなエラーが発生します。

（コマンドはpackage.jsonからパッケージをインストールする npm install を実行）

{
  "devDependencies": {
    "node-sass": "^6.0.0",
    "sass-loader": "^10.0.0",
  },
}

npm ERR! While resolving: sass-loader@10.1.0
npm ERR! Found: node-sass@6.0.1
npm ERR! node_modules/node-sass
npm ERR!   dev node-sass@"^6.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional node-sass@"^4.0.0 || ^5.0.0" from sass-loader@10.1.0
npm ERR! node_modules/sass-loader
npm ERR!   dev sass-loader@"^10.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: node-sass@5.0.0
npm ERR! node_modules/node-sass
npm ERR!   peerOptional node-sass@"^4.0.0 || ^5.0.0" from sass-loader@10.1.0
npm ERR!   node_modules/sass-loader
npm ERR!     dev sass-loader@"^10.0.0" 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! See C:\Users\***\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

sass-loaderの10系はnode-sassのバージョンは4か5じゃないといけないという内容。

ということで、sass-loaderのバージョンを上げて再実行

{
  "devDependencies": {
    "node-sass": "^6.0.0",
    "sass-loader": "^13.0.0",
  },
}

sass-loaderのバージョンは、2022年9月27日現在最新の13系を選択。

これで解決しました。

npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated html-webpack-include-assets-plugin@2.0.0: WARNING: This module has been renamed to html-webpack-tags-plugin. Please install it instead. See https://github.com/jharris4/html-webpack-tags-plugin for more information.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated multi-glob@1.0.2: No longer maintained
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated core-js@3.8.0: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 826 packages, and audited 827 packages in 4m

64 packages are looking for funding
  run `npm fund` for details

24 vulnerabilities (5 moderate, 16 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

注意する必要のない、あまり見る必要のない問題に対処するには npm audit を実行するというメッセージがありますが、動作上は問題ないので放置。

Node.jsではwebpackにかぎらず、ある機能を実現するにはいろいろなパッケージを組み合わせます。

各パッケージのバージョン違いによるエラーはよく出るので、こういう対応には慣れましょう。

また、node-sassはNode.jsのバージョンに大きく影響されます。

バージョン合わせの数珠つなぎですが、これもNode.jsにはよくあること。これにも慣れましょう。