vue支持scss

使用vue-cli搭建的vue项目，默认是不支持scss的，需要安装相应的插件才得以支持，下面说一下安装使用方法

执行下面命令，安装sass-loader 和 node-sass组件

npm install --save-dev sass-loader

npm install --save-dev node-sass

执行下面命令，安装scss 和 scss-loader组件(如果不安装这两个，在修改外部引用的scss文件时报错./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?)

npm install --save-dev scss

npm install --save-dev scss-loader

在vue组件里的style标签添加lang="scss"  <style lang="scss">，然后style里面的样式就可以使用scss语法。如果在style中引入外部scss文件，@import  './scss/common';

如果在main.js中引入scss文件，使用import './scss/common.scss'

注：在style和js中引入scss文件的区别是，style中import前需要加@后面需要加分号，不需要写文件后缀.scss。在js中前后不需要加@和分号，但是文件名后面必须加后缀.scss，不然会报错