less变量未定义是因@import顺序错位导致编译中断，变量必须在使用前全局定义；嵌套中重定义会静默覆盖而非局部生效，需用前缀命名并确保variables.less为首个导入文件。
变量定义顺序错位导致未定义
Less 的 @import 是线性拼接，不是模块加载。变量必须在使用前定义，否则编译直接报错或透出原始占位符（如 @primary-color 出现在最终 CSS 里）。常见错误是组件样式文件在 @import "variables.less" 前就引用了变量。
- 错误写法：
.btn { color: @primary-color; } @import "./variables.less";→ 编译中断，输出无效 CSS - 正确做法：统一入口（如
main.less）中，第一行 就@import "variables.less"; - Vue 单文件组件的
<style lang="less"></style>是独立编译上下文，不能共享外部变量；需显式@import或配置全局注入 - 检查是否有空的
.less文件——它会打断 import 链，导致后续变量不可见
变量被静默覆盖而非局部作用域
Less 没有块级作用域。写 .btn { @primary-color: red; } 不是声明局部变量，而是全局覆盖当前编译上下文中的 @primary-color 值。后续所有未锁定的引用都会拿到这个新值，且 DevTools 完全无法追踪覆盖来源。
- 避免在选择器内部重定义通用变量，比如
@primary-color、@border-radius-base - 泛义变量名必然冲突：多个组件文件各自定义
@primary-color，最终生效的是最后一个@import进来的值 - 安全做法是加前缀：
@btn-primary-bg、@modal-header-padding，而非复用顶层变量 -
!default只对首次声明有效，不是后备机制；@primary-color: #333 !default;在已有声明后出现，完全不生效
Ant Design 等框架变量覆盖失败
Ant Design 的 @primary-color 改了但按钮颜色不变，根本不是拼写错误，而是变量没参与编译——antd.less 已按默认值编译完毕。
- 必须严格三步顺序：
@import '~antd/lib/style/themes/default.less';→ 重定义变量（如@primary-color: #ff6b35;）→@import '~antd/dist/antd.less'; - 不能把这三步拆到不同文件；新建
src/theme.less，并在src/index.tsx最顶部、任何其他import之前引入它 - CRA 项目漏配
craco-less或未设javascriptEnabled: true，会导致 Ant Design 内联 JS 表达式（如colorPalette('@primary-color', 5)）失效 - 仍保留
import 'antd/dist/antd.css'会与 Less 编译冲突，CSS 已静态生成，变量修改无效
构建工具未捕获编译错误
Less 编译失败时，某些工具（如旧版 lessc、Winless、配置宽松的 Webpack）可能只警告不中断，导致你看到的 CSS 里残留 @primary-color 占位符——这不是“生效”，是编译压根没走完。
- Webpack 的
less-loader需显式开启throwOnImportError: true，否则错误被吞掉 - VS Code 的 Easy LESS 插件（1.7.0+）也遵循 Less 4.0+ 规则，不会自动补括号或提示变量未定义
- 排查时别只看浏览器样式，直接打开生成的 CSS 文件搜索
@primary-color—— 如果还存在，说明编译失败 - 运行
npx lessc src/main.less --no-js手动测试，能立刻暴露NameError: variable @primary-color is undefined
@primary-color 并逐行比对 import 顺序，问题基本就浮出水面了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
