必须在variables.less顶层集中声明带@前缀的语义化变量并确保所有组件文件顶部显式@import，否则将因作用域、顺序或编译机制导致变量不可用或覆盖失效。
直接在 variables.less 里定义带 @ 前缀的语义化颜色变量，并确保所有组件样式文件都显式 @import 它——这是唯一能真正统一主题色的起点。其他方式，比如在组件里零散 @import、或靠 JS 运行时改 document.styleSheets，都会漏控、失效或编译报错。
变量必须集中声明在 variables.less 顶层，且只声明不写样式
这个文件不是“样式入口”，而是纯数据源。它只做三件事：声明变量、加注释、结尾加分号。
-
@color-brand-primary: #1890ff;✅ 正确：语义命名 +@前缀 + 分号 -
primary-color: #1890ff;❌ 编译失败：漏@，Less 当成无效属性丢进 CSS -
.btn { @size: 14px; }❌ 错误作用域：嵌套块内声明的变量无法被其他文件读取 -
@import "mixins/border-radius.less";❌ 禁止：该文件若含变量定义，会意外覆盖你刚设的值
常见错误现象：@color-brand-primary 在 button.less 里用不了，但检查发现 variables.less 已 @import —— 很可能是因为它被放在了选择器之后，或者被包裹在某个 mixin 里，导致作用域失效。
@import 必须放在每个 .less 文件最顶部，顺序决定覆盖结果
Less 没有“全局变量池”，只有“导入顺序决定谁生效”。后 @import 的同名变量会覆盖前面的，但前提是它们处于同一编译上下文。
- 正确顺序：
@import "variables.less";→@import "themes/dark.less";→ 样式规则 - 错误写法：
.header { color: @color-brand-primary; }写在@import前 → 编译报错NameError: variable @color-brand-primary is undefined - Vue 单文件组件中
@import失效？因为 scoped style 是独立编译单元，必须靠style-resources-loader注入，不能手动写 - Vite 用户注意：
vite-plugin-style-import配置里patterns要用path.resolve()绝对路径，别写@/styles/variables.less
主题切换别指望运行时换 @ 变量，得靠 CSS 自定义属性联动
Less 的 @primary-color 是编译期静态值，生成的 CSS 里全是 color: #1890ff 这种硬编码。真要点击切换深色/浅色模式，必须引入 CSS 变量作为中间层。
- 在
variables.less中这样桥接：@color-brand-primary: var(--primary-color, #1890ff); - 然后用 JS 控制：
document.documentElement.style.setProperty('--primary-color', '#ff6b6b'); - 注意：
lighten(@color-brand-primary, 10%)会失败，因为lighten()不接受var()；需提前算好：--primary-hover: #40a0ff; - 深色模式适配要用
@media (prefers-color-scheme: dark)或 JS 手动切 class，不能依赖 Less 编译逻辑
最容易被忽略的是构建产物里的实际 CSS 输出——打开浏览器开发者工具，查最终生成的 .btn 规则里写的到底是 #1890ff 还是 var(--primary-color)。这比看 @import 顺序更真实，也更能暴露 loader 是否生效、变量是否被意外覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
