less不支持运行时主题切换，必须编译时生成多套css；主题需拆分为变量定义（如themes/light.less）和样式逻辑（如components/button.less）两层，通过--modify-var注入主题名并自动化编译。
Less 本身不支持运行时主题切换，必须靠编译时生成多套 CSS
Less 是静态预处理器，所有变量在编译阶段就已确定值，@theme 这类变量不会触发条件分支。所谓“动态换肤”，本质是提前编译出 theme-light.css、theme-dark.css 等多个独立文件，再由 JS 或 HTML data-theme 控制加载哪一套。试图用 @import + 变量覆盖实现单文件多主题，99% 的情况会因作用域和加载顺序失效。
主题包必须拆成「变量定义」+「样式逻辑」两层结构
把颜色、间距、圆角等设计值抽到单独的 themes/light.less 和 themes/dark.less 中；组件样式（如 .button、.card）写在另一套文件里，只引用变量，不硬编码值。这样改主题只需替换变量文件，组件逻辑完全复用。
-
themes/light.less里定义：@primary-color: #1a73e8;、@border-radius-base: 4px; -
themes/dark.less里对应定义：@primary-color: #255fa3;、@border-radius-base: 6px; - 组件文件（如
components/button.less）中只写：background-color: @primary-color;，不出现具体色值 - 编译脚本需分别执行：
npx lessc --modify-var="theme=light" src/entry.less dist/theme-light.css
避免用 @import 顺序模拟主题，它不可靠
常见错误是把 @import "themes/dark.less"; 放在组件文件之后，指望它覆盖前面的变量——Less 的变量作用域是“声明即生效”，不是“调用时取值”。Mixin 编译时读的是它被定义时的作用域，不是被调用时的上下文。一旦 .button() 在 themes/dark.less 之前就被解析，它永远用的是旧值。
- 正确做法：所有主题变量文件必须作为入口文件的第一批
@import，且仅导入一次 - 不要在组件文件内部
@import主题，否则无法复用同一套组件适配多主题 - 验证方式：在组件 mixin 里加注释
// debug: @primary-color，看编译后 CSS 是否是你期望的值
真正可维护的主题包需要构建脚本自动化
手动画多套 CSS 文件不现实。你需要一个脚本遍历 themes/ 下每个子目录，为每个主题生成对应的入口文件并调用 lessc 编译。主题名不能写死在 Less 里，而应通过 --modify-var 注入，避免污染源码。
- 示例命令：
npx lessc --modify-var="theme=blue" --modify-var="brand=enterprise" src/entry.less dist/theme-blue.css -
entry.less开头用@theme: "light";做兜底，但实际值由 CLI 覆盖 - 变量文件路径可拼接：
@import "themes/@{theme}.less";，Less v3.5+ 支持这种插值 - 注意：CSS 自定义属性（
var(--primary-color)）不能替代这套流程——它只能做运行时微调，无法改变选择器结构或媒体查询行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
