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

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

variables.less

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

安装插件

vue add style-resources-loader

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

然后会生成一个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-cli4 中设置less全局变量


下一篇:移动端适配插件——px2rem-loader