less变量无法动态换肤，因其在编译期被替换为硬编码值；真正可运行时切换的是css自定义属性（--xxx），需用~"var(--x, #xxx)"写法让less输出var()函数。
不能直接用 Less 变量实现动态换肤——@primary-color 是编译期常量，构建完就固化成具体值，JS 无法在运行时修改它。真正能动态切换的，只有 CSS 自定义属性（--primary-color），Less 在这里只负责“生成带 var() 的 CSS”，不是“提供可变变量”。
为什么 @variable 改了 JS 也无效？
Less 变量在 webpack/vite 构建阶段就被替换成硬编码值，比如 @bg: #1890ff; → 编译后 CSS 里只剩 background: #1890ff;。你调用 document.documentElement.style.setProperty('--bg', '#fff') 对它完全没影响，因为样式里根本没引用 --bg。
- 常见错误现象：
themes.dark.navbackground在 JS 里更新了，但导航栏背景色毫无反应 - 本质原因：
@navbackground: #001529是编译期常量，不是运行时引用 - 检查方法：打开浏览器开发者工具，看最终渲染的 CSS 规则里是否还存在
var(--navbackground)—— 如果没有，说明 Less 已把它展开了
如何让 Less 输出 var(--x) 而不是硬编码？
必须显式用 var() 函数包裹，并防止 Less 尝试解析它。推荐写法是加波浪号转义：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章