vue 2.0中引入sass的完整解决方案

Posted 2021-10-09 掺半N

1. sass-loader依赖于node-sass,所以要安装node-sass

npm install node-sass --save-dev       //安装node-sass
npm install sass-loader --save-dev         //安装依赖包sass-loader
npm install style-loader --save-dev        //安装style-loader

2. 在build文件夹下的webpack.base.conf.js的module下 rules里面添加配置

{
test: /.sass$/,
loaders: [\'style\', \'css\', \'sass\']
},

如果项目没有起来报错了可以参考看以下解决方案：

1.这是vue项目（由vue-cli创建）引入sass后，打包项目出现的错误。这个错误是sass-loader版本造成的

　　解决方案：在package.json中将 “sass-loader”:"^10.0.1"版本修改为"sass-loader": "^7.3.1",然后重新npm install

2.创建完这个文件以后，又出现了新的错误“Node Sass version 5.0.0 is incompatible with ^4.0.0.”
　　解决方案：
　　　　卸载已安装版本 npm uninstall node-sass
　　　　安装 npm install node-sass@4.14.1
成功解决问题。项目打包成功
最后总结一下当用vue-cli创建一个vue项目时，引入sass的步骤[不用配置，因为vue-cli中已经给我们配置好了]

1.下载安装：npm i node-sass sass-loader style-loader -D

2.可以开始用了【lang="scss"】

不想自己总结报错原因了，这是报错解决原文链接https://www.cnblogs.com/qiuyi...

看文章的时候一定要细心，粗心大意那只能消耗你自己的时间了！！