Vue部署Sass

鉴于有几位麻油私信我，询问vue里部署sass的具体步骤，这里追加一篇文章（其实网上也有很多）。

在搭建vue脚手架 或者是在vue项目中，想使用sass的功能，首先在当前目录下执行如下命令

npm install node-sass --save-dev         //安装node-sass 
npm install sass-loader --save-dev         //安装sass-loader 

//也可以合并为
npm install sass-loader node-sass --save-dev

安装完成后，记得去build目录下的webpack配置文件：webpack.base.conf.js中的rules里添加一项规则如下：

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

然后理论上跑起项目就ok了。

部分麻油反应运行时出错如下：

Modele build failed: TypeError: this.getResolve is not a function at Object.loader...

这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法：

简单点的操作是将    "sass-loader": "^8.0.0"（这是以我自己本地的版本为例），更换成了 "sass-loader": "^7.3.1",
然后重启项目，就ok了。

专业的操作是先卸载当前版本，然后安装指定的版本

npm uninstall sass-loader   //卸载当前安装的版本
npm install sass-loader@7.3.1 --save-dev  //指定安装版本

然后应该就没问题了，自己跑就行了。

The end

最后建议大家在用npm安装时，尽量换成cnpm,原因cnpm的安装方法，这里就不说了，自己百度就ok。