如何在vue项目中定义公共的less变量，在组件中使用

想把变量抽到一个公共的less文件中，然后在项目的各个组件都可以使用，试了很多方法都报错

vue-cli2.x

一，安装loader

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)
        }
    }

ps：path.resolve(__dirname, ‘…/src/assets/styles/common.less’)为自己对应的文件

然后后面将 return{} 块中的 less: generateLoaders(‘less’) 替换成上面自定义的函数 less: lessResourceLoader()

最后重启服务 less生效！！
然后发现不需要在main.js里引入，也不需要在app.vue里引入

vue-cli3及以上

安装loader

vue add style-resources-loader

vue.cogfig.js添加以下代码

const path = require("path");//这一段需要自行添加
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, "src/style/global.less")//需要自行添加，这里的路径不要写错了
      ]
    }
  }
}

也可以把以上的less路径写成一个index.less,然后在index.less里去@import各个文件

记住！less定义变量时一定要以;结尾
记住！less定义变量时一定要以;结尾
记住！less定义变量时一定要以;结尾