vue 使用less全局变量

我们经常用less定义一些全局变量，比如头部的高度，比如主题的颜色，比如侧边栏的宽度，这时我们定义less 全局文件是有必要的，那如何在vue中使用呢？
我首先尝试着把common.less文件，放在main.js中，发现并不起作用。。。
在网上搜了一下，可以这样配置：
首先安装一个包：

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

然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码：

 function lessResourceLoader() {
        var loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/assets/styles/common.less'),
                    ]
                }
                        }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

path.resolve(__dirname, '../src/assets/styles/common.less')路径改成自己对应的文件
然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()

修改完配置文件记得重启服务器：npm run dev
ok, common.less

@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;

注意，赋值不是等号

在组件中，就可以使用全局变量了。

<style lang='less' scoped>
  .content {
    background:red;
    height:auto;
    margin-left: @sidebar;
    width: calc(100%-@sidebar);
  }
</style>

生效！