3项目里面全局用less变量 cli vue_vue-cli创建的项目中如何引入全局less变量

背景

通常我们在用less时，会定义诸多变量，来减轻更改时的负担，但是在vue开发时，如果我们有一个variable.less文件，在组件中使用变量时不得不写入这个文件的引用，如下图

@assets:"~@/assets";

@import "@{assets}/css/variable.less";

组件那么多，一个一个都要引用，想想都觉得麻烦，有没有好的办法呢？

方法

vue-cli2.x 版本创建的项目如何解决？

1 安装 sass-resources-loader

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

2 修改构建文件

新增的部分开始 ----- 新增的部分结束

// 项目根目录下 build/utils.js

// generate loader string to be used with extract text plugin

function generateLoaders (loader, loaderOptions) {

var loaders = [cssLoader];

if (loader) {

loaders.push({

loader: loader + "-loader",

options: Object.assign({}, loaderOptions, {

sourceMap: options.sourceMap

})

});

}

//---------------新增的部分开始-------------------

if (loader == "less") {

loaders.push({

loader: "sass-resources-loader",

options: {

resources: path.resolve(__dirname, "../src/assets/css/variable.less")

}

});

}

//---------------新增的结束-------------------

// Extract CSS when that option is specified

// (which is the case during production build)

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: "vue-style-loader"

});

} else {

return ["vue-style-loader"].concat(loaders);

}

}

vue-cli3中修改方式

1 安装 所需的包

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

2 配置根目录下vue.config.js

module.exports = {

...

pluginOptions: {

"style-resources-loader": {

preProcessor: "less",

patterns: [

//这个是加上自己的路径，

//注意：试过不能使用别名路径

path.resolve(__dirname, "./src/assets/variable.less")

]

}

}

...

}