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>
相关推荐
计算机魔术师8 小时前
持股2%却要掌舵50.1%:Anthropic上市前的控制权保卫战
前端
粥里有勺糖8 小时前
体验一下最近比较🔥的闪卡SKILL
前端·github
flash俊杰8 小时前
WebGL 实时合成管线:纹理、Shader 滤镜链与离屏渲染调度
前端
前端snow8 小时前
ai agent --- LangSmith 全链路观测
前端
Csvn8 小时前
Hooks 原理:把"每次重跑的函数"变成"有记忆的组件"
前端
计算机魔术师8 小时前
用AI拒批老人看病?美国这个试点项目的激励机制出了大问题
前端
风骏时光牛马8 小时前
AI服务线上响应异常故障
前端
IT_陈寒8 小时前
JavaScript的this指向问题又让我加了个班
前端·人工智能·后端
PC2005_cloud8 小时前
Nginx 学习笔记:Server 块配置详解,域名路由与多站点部署实战
前端·后端
YIAN8 小时前
LangChain.js 对话记忆体系(一):内存存储与文件持久化,让 AI 拥有对话记忆
前端·后端·langchain