亲测在vue 3.x中自动引入全局less变量
vue项目开发过程中,每次都引入一次全局变量觉得很麻烦,接下来就可以解决你的麻烦了.
首先我们要用到一个工具 style-resources-loader
执行这个命令安装.
npm i style-resources-loader --save-dev
然后在vue.config.js中配置
const path = require('path');
/**
* 自动引入全局的less变量
* @param {*} rule
*/
const addStyleResource = (rule) => {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
// 需要全局导入的less,这个地方一点要写./src才行,否则会报错...
path.resolve(__dirname, './src/assets/styles/constant.less')
]
});
};
module.exports = {
chainWebpack: (config) => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)));
},
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
};
最后,配置完成后需要重启一下项目.重新npm start 即可.
然后就可以在项目中直接使用全局的less变量了
写在后面,目前看了一下网上还有别的方法,
方法一 (测试了,反正我这里用不了.别的未知)
方法二(测试了,我这里还是用不了.别的未知)
真是让人头凸 ┭┮﹏┭┮
正文到此结束
