亲测在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变量了

写在后面,目前看了一下网上还有别的方法,

方法一 (测试了,反正我这里用不了.别的未知)

 

 方法二(测试了,我这里还是用不了.别的未知)

真是让人头凸 ┭┮﹏┭┮ 

发布了71 篇原创文章 · 获赞 47 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览