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>
相关推荐
MengMeng_102322 分钟前
soc平台告警分析思路及chrome插件
前端·chrome·安全威胁分析
落落落洛克25 分钟前
WAIC 2026收官复盘:国产AI打通大模型、智能体、物理机器人全产业闭环
前端
小时代的大玩家34 分钟前
HarmonyOS新特性-沉浸光感在叠叠消小游戏中的落地实践
前端·harmonyos
hunterandroid36 分钟前
[鸿蒙从零到一] ArkUI 状态管理实战:从 @State 到 @Provide 与 @Consume
前端
Hilaku36 分钟前
为什么很多人觉得前端很简单?
前端·javascript·程序员
hunterandroid39 分钟前
[鸿蒙从零到一] ArkUI 列表与网格实战:List、Grid 与 LazyForEach
前端
李明卫杭州41 分钟前
Vue2 数组响应式为什么总"不更新"?深入源码对比 Vue3 的 Proxy 改造
前端·javascript·vue.js
索西引擎1 小时前
【React】useReducer 与 useState 的比较研究:复杂状态管理场景下的选型
前端·react.js·前端框架
hunterandroid1 小时前
前台服务适配与线上排查:通知权限、启动限制和任务保活
android·前端
我是大卫1 小时前
【图】React源码解析-从“上帝视角”俯瞰React的认知框架
前端·react.js·源码