Vue項目中 sass安裝

1. sass-loader依賴於node-sass,所以要安裝node-sass

cnpm install node-sass --save-dev 		//安裝node-sass 
cnpm install sass-loader --save-dev 		//安裝依賴包sass-loader 
cnpm install style-loader --save-dev 		//安裝style-loader

　　

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

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

3. 在需要用到sass的地方添加lang=scss

　

注: 安裝sass 出現問題  運行npm run dev 報錯! 

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

這是因為當前sass的版本太高，webpack編譯時出現了錯誤，這個時候只需要換成低版本的就行，下面說一下修改方法，很簡單，如下，找到package.json文件，里面的 "sass-loader"的版本更換掉 就行了。

 解決方法：

將 "sass-loader": "^8.0.0"，更換成了 "sass-loader": "^7.3.1",

 也可以先卸載當前版本，然后安裝指定的版本

卸載當前版本   npm uninstall sass-loader
安裝     npm install sass-loader@7.3.1 --save-dev

　　

參考鏈接: 

vue安裝node-sass編譯報錯 https://blog.csdn.net/ze1024/article/details/100516650

vue-cli+webpack構建vue項目和使用sass報錯填坑 https://www.cnblogs.com/x-llin/p/11737906.html

預處理 Sass、LESS 和 Stylus區別總結 https://blog.csdn.net/pedrojuliet/article/details/72887490