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>
相关推荐
每天吃饭的羊12 分钟前
组件库的有些点击事件是name-click这是如何分装de
前端·javascript·vue.js
Coder-coco12 分钟前
个人健康管理|基于springboot+vue+个人健康管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·mysql·论文
x***010623 分钟前
SpringSecurity+jwt实现权限认证功能
android·前端·后端
1024肥宅31 分钟前
防抖(Debounce)
前端·javascript·ecmascript 6
1024肥宅32 分钟前
节流(Throttle)
前端·javascript·ecmascript 6
by__csdn36 分钟前
Vue2纯前端图形验证码实现详解+源码
前端·javascript·typescript·vue·状态模式·css3·canva可画
w***37511 小时前
Spring 核心技术解析【纯干货版】- Ⅶ:Spring 切面编程模块 Spring-Instrument 模块精讲
前端·数据库·spring
我是阿亮啊1 小时前
搭建Vue环境遇到的问题
javascript·vue.js·npm·node.js
GISer_Jing1 小时前
jx前端架构学习
前端·学习·架构
间彧1 小时前
Tailwind CSS详解
前端