vue.config.js配置style-resources-loader在components使用颜色变量报错

使用`style-resources-loader`可以方便地在所有`vue`组件中共享样式资源，但是在使用颜色变量时可能会出现报错。

这是因为在`vue-loader`中默认开启了CSS modules，导致样式文件的作用域被限定在组件内部，而无法在全局中使用。解决方法如下：

1. 在`vue.config.js`中关闭CSS modules

module.exports = {
  css: {
    modules: false
  }
}

2. 在使用`style-resources-loader`时指定类型为全局

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .oneOf('vue')
      .use('style-resource')
      .loader('style-resources-loader')
      .options({
        patterns: [
          path.resolve(__dirname, './src/styles/variables.scss')
        ],
        // 指定类型为全局
        injector: 'global'
      })
      .end()
  }
}

这样就可以在所有`vue`组件中使用共享的样式资源了，其中包括使用颜色变量。