标签：style Vue 变量 less loader path resources

首先准备一个存放许多经常用到的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>

标签：style,Vue,变量,less,loader,path,resources
来源： https://www.cnblogs.com/qtdd/p/15518664.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。