Vue项目中sass-loader版本踩坑

刚刚创建好的vue项目,满心欢喜决定运行起来,然后由于你的组件中使用了scss模式,一运行就出现报错!!!

image.png

原因:未安装sass,那安装一下吧

npm install sass sass-loader

再运行,还报错!!!

原因:因为sass需要node-sass依赖,那么再安装一下依赖吧

npm install node-sass

再运行,还报错!!!

image.png

生气不!

原因:node与node-sass版本有对应关系,可能存在其中一个版本过高的问题
找一下对应关系吧!

node和node-sass版本关系

NodeJS	Supported node-sass version	Node Module
Node15	5.0+	88
Node14	4.14+	83
Node13	4.13+, <5.0	79
Node12	4.12+	72
Node11	4.10+, <5.0	67
Node10	4.9+	64

先检查一下自己的node版本

node -v
v14.7.0

我的是14.7,按照版本对应关系,需要安装node-sass版本4.14
根据版本对应表卸载后重新安装

npm uninstall node-sass
npm install [email protected]

我没有找到node-sass与sass-loader版本对应关系,但是实际中安装7.3的版本可正常运行

npm uninstall sass-loader
npm install [email protected]

总结:

其他版本不知道怎么对应,但是如果你的node版本为14+,可安装node-sass4.14+,sass-loader版本可安装7.3+