vue-cli配置sass，使用全局sass变量

vue-cli创建vue2.0项目,安装sass步骤
创建vue2.0项目:
vue init webpack 项目名
安装sass步骤:
npm install node-sass@4.14.1

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

不要使用一条命令npm i --save-dev node-sass sass-loader

因为最新安装的sass-loader是8.0,会报错!

就这两个步骤,即可在项目里使用sass(scss)!
不需要在build文件夹下的webpack.base.conf.js的rules里面添加配置!

{
test: /.scss$/,
loaders: [‘style’, ‘css’, ‘sass’]
}
上面那条配置可以省略，因为最新的vue-cli已经是默认配置好sass的（在build/util.js里），所以如果再在webpack里配置会重复，因此在main.js引入scss文件时会报错，也就是所只要安装了sass就行，什么都不用配置了!
成功后测试一下

<style lang="scss">
//$back:red;

#app {
  //background:$back;
  width: 100%;
  height: 100%;
}

新建sass文件，并定义变量
$my-font-color:#5794FF;
$my-line-color: #e8e8e8;
，之后导入文件到App.vue中

<style lang="scss">
@import "@/assets/styles/vars.scss";


</style>

之后就可以在所有页面正常使用啦