less无法读取css变量值，需分层实现换肤：编译期用less变量生成多套样式，运行时js切换data-theme或class触发css变量生效；mixin封装主题映射，确保变量名统一；js切换时须正确注入变量作用域，避免覆盖与兼容问题。
Less编译时无法读取CSS变量值，必须分层设计
Less是编译时预处理器，var(--primary-color) 这类CSS变量在Less里只是普通字符串，不会被解析或替换。想实现“无刷新换肤”，本质是两层协作：
- 编译期用Less变量生成多套CSS规则（如
@theme-dark对应的样式块） - 运行时靠JS切换根元素的
data-theme属性或CSS类，触发对应CSS变量生效
直接在Less里写 color: var(--primary-color) 没问题，但别指望它能驱动Less条件编译。
用Less Mixin封装主题色映射表，避免硬编码重复
把主题色定义成一个可复用的映射结构，而不是每处都写 var(--bg-color)：
.theme-vars() {
--bg-color: @bg-color;
--text-color: @text-color;
--primary-color: @primary-color;
}
<p>.theme-dark {
@bg-color: #1e1e1e;
@text-color: #f0f0f0;
@primary-color: #4a9eff;
.theme-vars();
}</p><p>.theme-light {
@bg-color: #ffffff;
@text-color: #333333;
@primary-color: #2c58a4;
.theme-vars();
}</p>
这样所有主题都走同一套CSS变量名，JS只需切 document.documentElement.classList.toggle('theme-dark')，无需动样式逻辑。
运行时JS切换主题时，必须确保CSS变量已注入且作用域正确
常见错误是只改了class，但没提前把主题CSS变量注入到 :root 或目标容器上：
- 如果用
.theme-dark类控制变量，它必须作用于html或body元素，否则子元素无法继承 - 不要依赖
:root.theme-dark { --bg-color: #1e1e1e; }这种写法——部分浏览器对动态添加的 :root 伪类支持不稳定 - 推荐直接给
html加类：document.documentElement.className = 'theme-dark'，再配对应Less规则
另外，首次加载时建议用 prefers-color-scheme 检测系统偏好，并同步设置初始class，避免闪屏。
换肤后部分样式不生效？检查CSS变量是否被更高优先级规则覆盖
CSS变量本身没有优先级，但使用它的属性（比如 background-color: var(--bg-color)）会参与层叠计算。容易踩的坑包括：
- 组件内部写了硬编码颜色，比如
button { background: #007bff; }，它会盖过var(--primary-color) - 多个主题CSS文件被同时引入，造成变量重复定义，最终取最后一个生效（但可能不是你想要的那个）
- 使用了
!important的旧样式，会强制压倒变量值
排查方法：打开DevTools，在Computed面板里看目标元素的 background-color 是否显示为 var(--bg-color)，再点开它，确认当前解析出的实际值是否符合预期。
真正麻烦的是变量链式依赖——比如 --hover-bg: color-mix(in srgb, var(--primary-color), #000 20%)，这需要浏览器原生支持 color-mix，而Less完全不处理这部分。这种场景下，要么降级为固定色值，要么改用JS动态计算后注入style标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
