scss样式使用lang=“scss“ 报错以及解决vscode scss样式飘红

遇到scss错误

是因为用到<style lang="scss">的话不能解析sass-loader

1. 安装node-sass、sass-loader

npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.11.0 --save
npm install style-loader --save

有些的版本过高也会报错，试验过后上面的我的可以正常使用。

2. 在build/webpack.base.config.js添加配置

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

然后使用就不会再报错，但是在代码段里还是飘红，有波浪线提示。

解决vscode scss样式飘红

1. 下载插件vetur
   
2. 点击扩展设置
   
3. 在这里找到点击“在settings.json”中编辑，然后会自动打开setting.json文件
   
   或者点击右上角
   
   
   这里改成vue
   即"files.associations": { "*.vue": "vue" }
   完成！！