我們經常用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')

修改完配置檔案記得重啟伺服器：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%[email protected]);
  }
</style>

生效！