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

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 [email protected]
成功解决问题。项目打包成功
最后总结一下当用vue-cli创建一个vue项目时,引入sass的步骤[不用配置,因为vue-cli中已经给我们配置好了]

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

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

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

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

你可能感兴趣的:(vue 2.0中引入sass的完整解决方案)