Vue项目中使用scss,如果写了一套完整的有变量的scss文件，全局引入供每个组件（页面）使用。
可以在mian.js全局引入，下面是使用方法。

1： 安装node-sass、sass-loader、style-loader

    npm install node-sass --save-dev
    npm install sass-loader --save-dev
    npm install style-loader --save-dev  

注意安装sass-loader版本过高问题，若遇到，降低版本即可，例如sass-loader@7.0.1

2： 安装sass-resources-loader （如果不安装的话变量会报错）

 npm install sass-resources-loader --save-dev

3： 修改build中的utils.js

image.png

 scss: generateLoaders('sass'),    修改为:
    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          //这里写自己的文件路径（配置使用scss中变量及继承中的属性类）
          resources: path.resolve(__dirname, '../src/assets/scss/commonBg.scss') 
        }
      }

使用过程大概如下：

①引入外部.scss文件

image.png

.z-background-color-white {
  background-color: #ffffff;
}
.z-border-1px {
  border-bottom: 1px solid #bbbbbb;
}

②组件中使用全局的属性类

image.png

部分代码：

.bas-information {
    @extend .z-background-color-white;
    @extend .z-border-1px;
    font-size: 14px;
    color: #666666;
    height: 56px;
  }

到此scss全局变量及继承属性类即可在所有组件（页面）中使用。