必须在variables.less顶层集中声明带@前缀的语义化变量，并确保所有组件文件顶部显式@import，否则变量不可用、覆盖失效或编译报错——这是唯一能真正统一配色的起点。
必须在 variables.less 顶层集中声明带 @ 前缀的语义化变量，并确保所有组件文件顶部显式 @import，否则变量不可用、覆盖失效或编译报错——这是唯一能真正统一配色的起点。
为什么 @import "variables.less" 放错位置就编译失败
Less 没有“全局变量池”，变量只在当前文件顶层作用域有效，且导入顺序决定覆盖结果。一旦 @import 写在选择器之后、注释中间、或被包裹在 .mixin() 里，变量就不可见。
- 错误写法：
.header { color: @color-brand-primary; }<br>@import "variables.less";——使用在前、声明在后，直接报NameError: variable @color-brand-primary is undefined - 正确写法：
@import "variables.less";<br>.header { color: @color-brand-primary; }——必须是文件第一行（注释除外） - Vue 单文件组件中
@import失效？因为 scoped style 是独立编译单元，需靠style-resources-loader注入，不能手动写
variables.less 里只能写什么、不能写什么
它不是样式入口，而是纯数据源。只做三件事：声明变量、加注释、结尾加分号。任何偏离都会导致变量失效或污染编译上下文。
- ✅ 正确：
@color-brand-primary: #1890ff;（语义命名 +@前缀 + 分号） - ❌ 编译失败：
primary-color: #1890ff;（漏@，Less 当成无效属性丢进 CSS） - ❌ 错误作用域：
.btn { @size: 14px; }（嵌套块内声明，无法被其他文件读取） - ❌ 禁止混入：
@import "mixins/border-radius.less";（若该文件含变量定义，会意外覆盖你刚设的值）
如何让主题切换真正生效，而不是“改了但没变”
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-dark，而是在媒体查询中重设同一变量：@media (prefers-color-scheme: dark) { :root { --primary-color: hsl(210, 70%, 40%); } }
最容易被忽略的是：变量命名是否真正语义化、@import 是否真的出现在每个文件最顶部、以及构建工具是否监听了 variables.less 变更并触发重编译——这三点缺一不可，否则改了等于白改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
