webpack + vue + less 全局变量的解决方案

今天发现一个好用的东西sass-resources-loader
sass-resources-loader不仅支持SASS，还支持LESS，POSTCSS等
由于Vue单文件组建内，less变量不能共享
每个文件都要@import一遍，费时费力还不讨好
接下来使用sass-resources-loader设置less全局变量
这边使用的vue是vue-cli3生成的

安装sass-resource-loader:

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

在vue.config.js中引入：

module.exports = {
  chainWebpack: config => {
    const oneOfsMap = config.module.rule('less').oneOfs.store
    oneOfsMap.forEach(item => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Provide path to the file with resources//此处为less全局变量放置的位置
          resources: './src/public.less'
        })
        .end()
    })
  }
}

哈哈哈，接下来我们把public.less在main.js中引入，就可以在vue组件里直接使用less全局变量了！！！