vue-cli 安装scss，且可以全局引入。

前言

css预处理器让自己的css更加简洁、适应性更强、可读性更佳，更易于代码的维护。

安装

1.安装基础scss插件

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

安装完毕后，我们发现如果需要在.vue文件中想用变量，必须import引入变量文件，css文件可以在main.js中可以直接import，而scss文件import会报错。

2.安装自动引入全局变量插件

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

3.修改build中的utils.js

 scss: generateLoaders('sass')

    修改成:

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/commonScss/index.scss')
        }
      }
    )

注意：

commonScss/index.scss中，不能写基础样式，否则打包后会重复。commonScss/index.scss中，只写变量和混合。