直接改变量就能换主题，但必须在所有组件样式编译前定义变量，否则@primary-color仍为旧值；less变量按导入顺序“最后定义生效”，mixin引用取调用时上下文值，非定义时值。
直接改变量就能换主题，但前提是变量得在所有组件样式编译前就定义好，否则 @primary-color 还是旧值，按钮颜色根本不会变。
为什么改了变量文件，组件颜色却没更新？
Less 变量作用域是“最后定义生效”，但 mixin 引用变量时取的是**调用时的上下文值**，不是定义时的。常见翻车场景：
- 主入口先
@import "components/button.less"，再@import "themes/dark.less"→ 按钮编译时@primary-color还没被覆盖 - 在组件文件里用
@import (reference) "variables.less"，但没加(reference)→ 变量被重复定义或覆盖 - 第三方库（如 Ant Design）的变量被
modifyVars覆盖，但 Less 编译器没读到路径 → 报Cannot resolve variable @text-color
验证方式：在 mixin 里加一行 // debug: @primary-color，看编译后 CSS 注释里是不是你期望的值。
如何安全地定制第三方组件库的 Less 样式？
别碰 modifyVars，90% 的需求靠顶层类覆盖更稳：
- Ant Design 按钮圆角：写
.ant-btn { border-radius: 4px; }，而不是改@btn-border-radius-base - 确保
@import顺序：先@import '~antd/lib/style/themes/default.less'，再@import '~antd/lib/button/style/index.less'，顺序错会导致变量未定义 - Webpack 用户必须在
less-loader的lessOptions.paths里加node_modules路径，否则@import "xxx"直接报错 - Vite 用户要在
vite.config.ts的css.preprocessorOptions.less.additionalData中补路径别名
自己写的组件 mixin 怎么支持运行时主题切换？
参数化 mixin 是基础，但要兼容 CSS 变量（--primary-color），就得把 Less 变量转成 fallback：
.button(@bg: #007bff) {
background-color: @bg;
background-color: var(--primary-color, @bg);
}
这样既能构建时编译出默认值，又允许 JS 运行时通过 document.documentElement.style.setProperty('--primary-color', '#ff6b6b') 动态覆盖。
关键点：所有主题相关变量必须统一放在一个 variables.less 文件里，且该文件 @import 在所有组件 mixin 之前；mixin 内部不硬写颜色值，只接受参数传入。
定制时最容易被忽略的坑
不是语法错误，而是编译链路断裂：
-
@import "@/styles/variables"在 Webpack 里会失败 —— Less 不走resolve.alias，必须用lessOptions.paths显式映射 - 用了
extend()做样式复用，结果多个组件都:extend(.base)，编译后生成冗余选择器链，CSS 体积暴涨且难以调试 - 在 mixin 里嵌套
&:hover，调用位置不同导致生成.card .btn:hover或.modal .btn:hover，样式泄漏出预期范围
真正可控的定制，靠的是变量集中、@import 顺序严格、mixin 参数正交、路径配置到位 —— 缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
