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>
相关推荐
xiaofeichaichai4 小时前
Webpack
前端·webpack·node.js
问心无愧05134 小时前
ctf show web入门111
android·前端·笔记
唐某人丶5 小时前
模型越来越强,我们还需要 Agent 工程吗?—— 从价值重估到 Harness 实践
前端·agent·ai编程
智码看视界5 小时前
现代Web开发基础:全栈工程师的起航点
前端·后端·c5全栈
JS菌5 小时前
手写一个 AI Agent 全栈项目:从沙箱执行到子智能体的完整实现
前端·人工智能·后端
excel6 小时前
HLS TS 文件损坏的元凶:Git 提交与拉取
前端
Aphasia3116 小时前
https连接传输流程
前端·面试
徐小夕6 小时前
万字长文!千万级文档 RAG 知识库系统落地实践
前端·算法·github
梦梦代码精7 小时前
2026年PHP开源商城系统实测对比:架构、多商户、商用授权,谁才是真·省心?
vue.js·docker·架构·开源·代码规范