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

Admin 2022-07-22 PM 411℃ 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将文件注释掉就可以了

// import '@/styles/variables.scss'

大功告成~~
撒花,下课

标签: NodeJs, node-sass, Node, 兼容性

非特殊说明,本博所有文章均为博主原创。

评论啦~


选择表情