根本原因是@import顺序错误、作用域隔离或路径失效：变量必须在引用前通过顶部@import同步注入，否则编译器跳过不回溯；单文件组件中<style lang="less">独立编译，需显式导入；Vite中别名路径无效，须用path.resolve转绝对路径。
根本原因不是变量写错了，而是它根本没被编译器“看见”——@import顺序错、作用域隔离、路径失效这三类问题占了90%以上。
变量定义在引用之后，编译器直接跳过
Less不回溯、不预加载，所有变量必须在使用前就通过@import同步注入。一旦某行写了color: @primary-color;，而@primary-color的定义还在后面或另一个文件里，这一行就会变成color: @primary-color;原样输出（或整个文件编译为空）。
- 错误写法：
.btn { color: @primary-color; } @import "variables.less"; - 正确写法：入口
main.less最顶部第一行就是@import "variables.less";，之后才是组件样式 - 空
.less文件、注释开头没内容的文件，也会导致后续@import静默中断
Vue/React单文件组件里变量不共享
每个<style lang="less">都是独立编译上下文，@import不会跨<style>块生效。你在src/styles/variables.less里定义了@primary-color，但在Button.vue里不显式@import，它就是undefined。
- 必须在每个需要变量的
<style>块内写：@import "@/styles/variables.less"; - Vite中别名路径
@/styles/variables.less在@import里无效，得用path.resolve()转成绝对路径注入到additionalData - Webpack中若配了
include: /node_modules\/antd/，你的自定义主题文件可能压根没走modifyVars流程
构建工具没真正编译Less，只是透出了原始代码
看到CSS里还有@primary-color，或者整个CSS文件为空，基本可断定Less编译中途失败，但构建工具没报错也没中断流程。
立即学习“前端免费学习笔记（深入）”；
- 检查产物CSS里是否残留
@开头的变量名——有就说明less-loader没启用或javascriptEnabled: true没开 - Webpack旧版
less-loader默认throwOnImportError: false，@import失败只警告不阻断 - VS Code的Easy LESS插件已停更，v1.80+常静默跳过编译，控制台无任何日志
-
lessc input.less > output.css这种命令行写法，错误输出到stderr，stdout仍会写入空文件
最容易被忽略的一点是：Less变量和CSS自定义属性（--x）完全不是一回事。你改了@primary-color，想在Chrome DevTools里实时调，是不可能的——它早就在编译时被替换成#007bff了，浏览器根本没见过这个变量名。
