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>
相关推荐
用户252632753478 小时前
请问同一台服务器能同时部署前后端项目并支持https吗?
前端
Sincerelyplz8 小时前
【Pipecat】基于Pipecat的voice agent实践
前端·后端·agent
lerhxx8 小时前
为什么你的Three.js物体总是乱转?一文彻底搞懂“万向锁”与四元数
前端·three.js
计算机魔术师8 小时前
写了代码还要人修?Google 的 AI 编程助手自己打补丁了
前端
DevOpenClub9 小时前
Markdown、HTML 和 PPT 如何稳定交付:文档转换任务的幂等发布流程
开发语言·前端·c#·html·powerpoint
DevOpenClub9 小时前
网页证据如何长期复核:快照、静态 HTML 与 PDF 归档链路
前端·pdf·html
Canace9 小时前
基于 Codex Agent Harness 套壳实现自己的 AI 产品:Agent 运行时与任务编排实践
前端·人工智能·agent
星栈独行10 小时前
自定义 UI-UX-Pro-Max 的 CSV 知识库,把 AI 生成的后台拉回行业该有的样子
前端·人工智能·ui·ux
hunterandroid10 小时前
[Android 从零到一] APK 体积优化实战:从 50MB 到 15MB 的瘦身之旅
android·前端
Coodor10 小时前
在前端如何转换IC卡卡号格式
前端·javascript·nfc·卡号格式