如何在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定义变量时一定要以;结尾