526互联

node,image-webpack-loader,node-sass,sass-loader版本对应问题

发布时间 2023-05-24 17:34:09作者: sinceForever

废话不多数，直接说原因和结果
原因：image-webpack-loader问题
我之前安装的是image-webpack-loader最新版本大约是8+，安装的时候没有报错，运行项目的时候报错，我看了报错大致就是讲图片引入解析错误，后来想到版本问题的天坑，就把image-webpack-loader往下退了一个版本,我选这个版本是觉得它比较新，离8比较近，另外我看到仅七天下载量和最新版差不多，且差不多是所有版本下载量最高的，我猜它应该最稳定，最好用，嘻嘻，事实证明我的想法没错！
执行

npm uninstall image-webpack-loader
npm install image-webpack-loader@6.0.0 --save-dev

另外，如果你们报node-sass之类的错误，多半也是node环境与node-sass不匹配
1.查看node与node-sass版本对应

2 查看node-sass和sass-loader版本是否对应
以下是部分版本号对应，具体可百度

sass-loader 4.1.1，node-sass 4.3.0
sass-loader 7.0.3，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.7.2
sass-loader 7.3.1，node-sass 4.14.1

以上两点就可以保证node与node-sass sass-loader基本是匹配的，只要版本匹配就不会出现各种奇怪问题！
在项目环境中执行

npm uninstall node-sass sass-loader

npm install sass-loader@版本号 node-sass@版本号 --save-dev //安装对应的版本

按照以上分析，我的node是14.21.3，我的sass-loader是 7.3.1，我的node-sass是4.14.1，我的image-webpack-loader是6.0.0

*如果大家在安装这几个报错的话，可以从以下几个地方着手
1，npm cache clean --force //清除npm缓存
2，每次安装某个依赖的时候先卸载改依赖，卸载时不需要加版本号，只有安装的时候加你要的版本号，如果你想安装最新的，可以不加。
3，如果以上两步都失败了，那就还有使用cnpm，或者使用Tanpopo等其他软件，或者取消代理等，具体原因等你遇到了再试，
耐住性子，一般报错都是各种插件与node环境不匹配导致的，所以换个匹配的版本基本就可以了。