Vue中使用style-resources-loader配置全局使用lLess变量

本文主要是介绍Vue中使用style-resources-loader配置全局使用lLess变量，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先准备一个存放许多经常用到的less变量文件

variables.less

//公共变量
// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;

安装插件

vue add style-resources-loader

然后会生成一个vue.config.js的文件，这里的patterns需要自己配置全局less文件的路径

const path = require('path');
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.join(__dirname, './src/assets/styles/variables.less'),
                path.join(__dirname, './src/assets/styles/mixins.less'),
            ]
        }
    }
}

配置完成后，重新启动项目，然后在组件中测试，此时就可以不用导入外部CSS样式了，因为全局less变量生效了

<style lang="less" scoped>
div{
    .hoverShadow();
    color:@xtxColor;
}
</style>

这篇关于Vue中使用style-resources-loader配置全局使用lLess变量的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！