vue+less+style-resources-loader 配置全局颜色变量

全局统一样式后,可配置vue.config.js实现全局颜色变量,方便在编写时使用统一风格的色彩

一、新建global.less

二、下载安装style-resources-loader

javascript 复制代码
npm i style-resources-loader --save-dev

三、在vue.config.js中进行配置

javascript 复制代码
module.exports = {
	 pluginOptions: {
	    'style-resources-loader': {
	      preProcessor: 'less',
	      patterns: [resolve('src/assets/css/global.less')]
	    }
	  },
}

四、在vue文件中使用

javascript 复制代码
<style lang="less">
.test{
    color:@theme-color;
}
</style>
相关推荐
Johnnyhaha2 分钟前
Docker Compose Pull 超时与代理踩坑记录
前端
烟袅3 分钟前
React 表单的控制欲:什么时候我们真得控制它了,什么时候该放养了?
前端·react.js
不想秃头的程序员5 分钟前
吃透 JS 事件委托:从原理到实战,解锁高性能事件处理方案
前端·面试
AntoineGriezmann6 分钟前
前端 Token 刷新机制实战:基于 Axios 的 accessToken 自动续期方案
前端
烟袅8 分钟前
从定时器管理出发,彻底搞懂防抖与节流的实现逻辑
前端·javascript
计算机毕设VX:Fegn089513 分钟前
计算机毕业设计|基于springboot + vue小区人脸识别门禁系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
UIUV1 小时前
JavaScript 遍历方法详解
前端·javascript·代码规范
Zyx20072 小时前
React 中的 Props:组件通信与复用的核心机制
前端
海云前端12 小时前
大模型Function Calling的函数如何调用的?
前端