sass-loader与webpack版本冲突解决方案

#npm i 错误解决记录#

最开始错误 :拉取代码,增加依赖时,报错

问题:

在安装sass-loader@10.1.1时,发现与现有的webpack版本有冲突。

当前项目已经安装了webpack@4.28.4(通过peer dependency requirements from other packages),但是sass-loader@10.1.1要求webpack的版本是^4.36.0 || ^5.0.0。

而当前项目中的webpack版本是4.28.4,低于4.36.0,因此不满足要求。

(sass-loader@10.1.1 与项目中已安装的 webpack@4.28.4 版本不兼容)

复制代码
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: sass-loader@10.1.1
npm error Found: webpack@4.28.4
npm error node_modules/webpack
npm error   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm error   node_modules/@intervolga/optimize-cssnano-plugin
npm error     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0
npm error   node_modules/@soda/friendly-errors-webpack-plugin
npm error     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm error
npm error Could not resolve dependency:
npm error peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.1.1
npm error node_modules/sass-loader
npm error   dev sass-loader@"10.1.1" from the root project
npm error
npm error Conflicting peer dependency: webpack@5.99.9
npm error node_modules/webpack
npm error   peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@10.1.1
npm error   node_modules/sass-loader
npm error     dev sass-loader@"10.1.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

尝试解决:npm uninstall sass-loader

但此时npm install sass-loader@8 --save-dev 执行时还是有问题(原因sass-loader@8.0.2也需要webpack@^4.36.0 || ^5.0.0,而我们的webpack是4.28.4(低于4.36.0),所以仍然不满足)

复制代码
pm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: jnpf-web@3.4.1
npm error Found: webpack@4.28.4
npm error node_modules/webpack
npm error   peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6
npm error   node_modules/@intervolga/optimize-cssnano-plugin
npm error     @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.0
npm error   node_modules/@soda/friendly-errors-webpack-plugin
npm error     @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@3.5.3
npm error     node_modules/@vue/cli-service
npm error       dev @vue/cli-service@"3.5.3" from the root project
npm error   19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm error
npm error Could not resolve dependency:
npm error dev sass-loader@"8" from the root project
npm error
npm error Conflicting peer dependency: webpack@5.99.9
npm error node_modules/webpack
npm error   peer webpack@"^4.36.0 || ^5.0.0" from sass-loader@8.0.2
npm error   node_modules/sass-loader
npm error     dev sass-loader@"8" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

解决:

先 npm uninstall sass-loader

再npm install sass-loader@7.3.1 --save-dev

(

查阅sass-loader的版本历史:

  • sass-loader v7.x 支持 webpack 4 (包括早期版本)

  • 根据错误信息,sass-loader@8.0.2需要webpack>=4.36.0,所以如果我们用7.x版本,可能就可以兼容webpack4.28.4。

)

注意:

不要使用 --force 或 --legacy-peer-deps:这会导致依赖树混乱,可能在运行时崩溃

相关推荐
福兮说3 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理4 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
专业程序开发源4 小时前
springboot简历管理系统81389-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·php·课程设计
专业程序开发源4 小时前
springboot社区养老系统44071-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·django·php·课程设计
小呆呆6664 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)5 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan5 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_6 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒6 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技6 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端