vue中全局引入less变量

在项目中我们经常用less来定义一些全局变量，比如字体大小颜色，背景颜色，边框颜色，标题高度，按钮大小等等。 我们把这些less变量定义在文件中，并在，发现并不起作用。

解决方法为：

1、安装 sass-resources-loader

npm install sass-resources-loader --save-dev
复制代码

2、build 的中 = function (options) {}添加代码

function lessResourceLoader(){
    var loaders = [
      cssLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
            resources:[
              (__dirname, '../src/common/less/')
            ]
        }
      }
    ];
    if(){
      return ({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    }else{
      return ['vue-style-loader'].concat(loaders)
    }
  }
复制代码

3、(__dirname, '../src/common/less/')改为less所对应的路径 并将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

这样你就可以在任意组件中中使用中定义的变量了