vue 中安裝使用sass 報錯遇到的問題整理

不出錯的狀況下，正常安裝：

1.安裝包：

npm install node-sass --save-dev

npm install sass-loader --save-dev

（sass-loader依賴於node-sass）

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

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

3.在APP.vue中修改style標籤

<style lang="scss">

4.啓動npm run dev

若是一切順利，恭喜你，若是沒成功，別慌

出錯狀況：

a.在第一步安裝sass-loader和node-sass時報錯，我裝了不少次，sass-loader沒問題，主要是node-sass裝不上，多是網絡緣由沒法下載，能夠使用淘寶鏡像來安裝：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org  （安裝淘寶鏡像）

$ cnpm install node-sass  --save （使用淘寶鏡像安裝node-sass）

OK，若是沒問題了的話，恭喜，能夠回到2.3.4來使用sass了

b.像我這種運氣差到用淘寶鏡像依然裝不上的狀況怎麼辦？不慌

安裝失敗之後就不會再下載了，因此先把安裝失敗遺留的東西刪掉：

npm uninstall node-sass && npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

 

而後去官網選擇版本號、系統環境下載node-sass文件到本地，後綴是.node文件，經過本地來安裝：

下載地址：https://github.com/sass/node-sass/releases

 

下載完之後，打開文件夾，複製地址，經過git本地安裝：

npm i node-sass --sass_binary_path=/Users/win32-x64-64_binding.node

紅色部分是你node-sass的本地地址

安裝號之後，繼續2.3.4，若是能夠運行起來，恭喜，你已經能夠用sass了！

c.什麼，像我這種運氣差的人，還報錯是麼？不慌，看看錯誤代碼是什麼：

 

 

意思是sass-loader依賴於V4以上的node-sass版本，可是找不到，而後打開package.json發現是由於node-sass被安裝到了生產環境依賴模塊裏面，換到開發環境：

npm i node-sass -D

 OK了，問題解決，但願可以幫到你！