vue-cli3项目 less获取全局变量

目前遇到的问题：vue项目main.js中引入index.less,但是子组件中想要应用index.less中定义的变量，会报错。

方法一：在每个子组件中引入index.less。

   注意：此方法虽然能解决问题，但是太麻烦，不是最有办法。

方法二：安装 style-resources-loader
安装完成之后，命令行会让你选择预处理器，我们选择 less!

上述安装完预处理器，会在项目的 vue.config.js 里面生成一段代码，我们只需要将 less 文件路径放入其中

chainWebpack: (config) => {
    const oneOfsMap = config.module.rule('less').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('style-resources-loader')
        .loader('style-resources-loader')
        .options({
          // or an array : ["./path/to/vars.less", "./path/to/mixins.less"] 这里的路径不能使用@，否则会报错
          patterns: './src/assets/css/variables.less'
        })
        .end()
    })
  }