參考:https://www.npmjs.com/package/sass-loader
https://blog.csdn.net/XUELUO123456789/article/details/100350412
https://www.cnblogs.com/charleswong/p/11439245.html
1、vue項目安裝node-sass,sass-loader
(1)安裝sass-loader、node-sass
1)方法一:npm安裝
npm install sass-loader node-sass -D
優點:安裝的數據齊全
缺點:安裝速度慢
2)方法二:cnpm安裝(國內淘寶鏡像安裝)
安裝cnpm: npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
安裝node-sass,sass-loader: cnpm install sass-loader node-sass -D
優點:安裝速度快
缺點:安裝的數據易丟失
備注:
- -D 是--save-dev 的簡寫,是項目中安裝的意思;
- 上面的方法是同時安裝sass-loader和node-sass也可以分開安裝,如下所示:
npm install node-sass -D
npm install sass-loader -D
2、vue項目使用sass報錯
錯誤:Modele build failed: TypeError: this.getResolve is not a function...
錯誤原因:sass-loader版本過高導致編譯錯誤
解決辦法:將sass-loader版本調至7.3.1
1)方法一
-
-
- 刪除文件node_modules;
- 將文件package.json中的sass-loader版本改為7.3.1;
-
-
-
- 運行 npm install (安裝項目依賴);
- 安裝項目依賴 :npm install
- 啟動項目:npm run dev
-
2)方法二
- 卸載sass-loader:npm uninstall sass-loader
- 安裝sass-loader:npm install sass-loader@7.3.1 --save-dev
- 啟動項目:npm run dev