记录一下今日遇到的Node 16版本 node-sass 兼容性问题

Admin 2022-07-22 PM 2762℃ 0条

问题1：

我电脑Node版本是 16 版本，version 16.15.1，运行其他同事写的项目时，遇到node-sass版本兼容性问题

项目的package.json文件版本，如下：

 "dependencies": {
   "node-sass": "^4.9.0",
   "sass-loader": "^8.0.2",
 }

经过cnpm install 下载依赖时，会拦截node-sass的安装，提示当前Node版本与node-sass版本不匹配，我只能手动进行node-sass的依赖下载；

不过直接执行 cnpm install node-sass 之后，虽然没有报错，但是运行会提示

Node Sass version 6.0.0 is incompatible with ^4.0.0

经过各个渠道排查，最终同时安装node-sass 6版本和sass-loader 10版本才将问题解决

命令如下：

cnpm i node-sass@6.0.1 sass-loader@10.2.0

问题2：

不过当node-sass 的问题处理好之后，又出现了新的问题

报错信息如下：

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependData'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }


 @ ./src/main.js 39:0-29

经过多方面排查，最终原因为

由于安装了sass-loader 10.x的版本，新版本不再支持 data方式或者prependData 的引入了，需要改成additionalData

打开项目中的vue.config.js文件,将prependData 修改为additionalData

scss: {
    additionalData: `@import "~@/styles/variables.scss";`
}

问题3 ：

新问题又又又出现了

报错信息如下：

SassError: An @import loop has been found:
           src/styles/variables.scss imports src/styles/variables.scss
        on line 1 of src/styles/variables.scss
>> $bgGray: #F5F5F5;

报错原因为：

也是因为使用了sass-loader 10版本，在 vue.config.js 中引入了 variables.scss 后，不要再在 main.js 中引入了。去main.js将文件注释掉就可以了