轉(zhuǎn)自：https://blog.csdn.net/hani_wen/article/details/81007852

首先安裝一個(gè)包：
npm install sass-resources-loader --save-dev

適用于sass,less等引入全局文件。

然后在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') 把路徑改成想要引入的全局less 文件， 然后后面將下面代碼中的 less: generateLoaders('less') 替換成上面自定義的函數(shù) less: lessResourceLoader()。

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders('less'),
    less: lessResourceLoader(),
    sass: generateLoaders('sass', {
      indentedSyntax: true
    }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

修改完配置文件記得重啟服務(wù)器：npm run dev
ok, common.less

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

注意，賦值不是等號(hào)

在組件中，就可以使用全局變量了。

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