在vue項目中使用scss，以及vscode適配scss語法（解決使用scss語法編輯器報錯）

項目搭建好之后

1. 安裝sass 依賴包

   npm install --save-dev sass-loader
   //sass-loader依賴於node-sass
   npm install --save-dev node-sass

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

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

   

3. 使用scss時候在所在的style樣式標簽上添加lang=”scss”即可應用對應的語法

   <style lang="scss" scoped>
   
   </style>

    

在運行時可能會出現在Module build failed: TypeError: this.getOptions is not a function這個錯誤

這個是sass-loader版本問題，降低版本可解決問題，直接使用一下命令降低版本號

npm install sass-loader@7.3.1 --save-dev

后面可能還會出現問題Module build failed: Error: Node Sass version 6.0.0 is incompatible with ^4.0.0.

這個是node-sass的版本問題，6.0版本和4.0版本不兼容，

使用命令降低版本

npm install node-sass@4.14.1 --save-dev

然后就可能正常使用scss了

 

　　使用scss語法編輯器報錯可能是因為settings.json配置了這個，把下面這個取消注釋就好了

　　

 

 

 

 

這樣就能支持scss語法了，但是這樣之后不會自動補全html標簽，解決這個問題需要在json文件中再添加

// tab鍵觸發emmet快捷生成
    "emmet.triggerExpansionOnTab": true,

 

 

 

 輸入標簽后連按tab鍵即可補全標簽