vue脚手架全局引入scss变量表 2.0和3.0

项目中的全局css变量一般抽离出来单独维护，此处使用的是scss（不适用于styl/less）

vue-cli 2.0的脚手架

// 首先需要额外安装一个loader
npm install sass-resources-loader --save-dev


// 然后需要修改build中的utils.js
// 将
scss: generateLoaders('sass')

// 修改为
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
	    //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/common/style/index.scss')
    }
  }
)

// 这样就可以直接使用$变量了

vue-cli 3.0的脚手架

// 在vue.config.js中增加
 css: {
    loaderOptions: {
      // 注入scss全局变量
      scss: {
        data: `@import "~@css/variables.scss";`
      }
    }
  }