Less循环依赖导致样式静默丢失而非报错，因其@import为文本拼接，遇A→B→A时跳过重复导入，不注入变量/mixin、不输出CSS规则，仅留undefined警告。
Less编译时循环依赖不会报“循环引用”错误，而是让部分样式静默消失——因为编译器在展开 @import 链时卡死或跳过失败节点，导致后续文件的作用域不完整、变量未定义、选择器没生成。
为什么循环依赖会让CSS“少一部分”而不是直接报错
Less 的 @import 是文本拼接，不是模块加载。A.less @import B.less，B.less 又 @import A.less，编译器会反复展开直到内存耗尽或主动放弃。它不会中断整个编译，而是：跳过第二次及以后的 A.less 解析；不注入其内部的变量/mixin；也不输出其 CSS 规则块——结果就是你看到 .btn 样式没了、@primary-color 报 undefined，但其他部分照常工作。
-
FATAL ERROR: Allocation failed - JavaScript heap out of memory是内存爆了，但更多时候是静默丢弃，只留一句Cannot access property @xxx - 用
lessc --verbose index.less能看到 “skipping duplicate import” 或 “failed to load” 类提示，但默认不输出 - Webpack/Vite 默认隐藏这类警告，需配
lessOptions: { javascriptEnabled: true }并开启devtool: 'source-map'才暴露链路
快速定位哪两个文件在互相引用
别靠眼睛搜 @import，Less 不报路径。真正有效的办法是借构建工具“逼它说出来”：
- 把项目里所有
@import (reference)和@import (inline)临时改成普通@import——循环会立刻触发Variable @xxx is undefined或Undefined mixin '.xxx'，错误堆栈里带完整路径 - Webpack/Vite 中用
postcss-import替换原生@import（需改 loader 配置），报错时直接打出链路如：A.less → B.less → C.less → A.less - 在每个疑似文件顶部加
// @DEBUG: imported by X，全局搜索imported by，5 分钟内手动画出依赖图
拆解循环必须新建 tokens.less 并切断所有反向引用
发现 typography.less 和 spacing.less 互引？不能靠 @import (multiple) 或删掉某个 @import 掩盖，必须物理隔离：
立即学习“前端免费学习笔记（深入）”；
- 新建
tokens.less，只放变量（@font-size-base）、函数（.px2rem()）、原子 mixin（.text-ellipsis()），不写任何选择器、不@import其他文件 - 把原来在
typography.less和spacing.less中互相引用的部分全删掉，改从tokens.less读取 - 确保
tokens.less是项目中第一个被@import的文件，比如放在index.less最顶部 -
@import (reference) "mixins.less"救不了循环——它只控制“样式是否输出”，不解决“变量/mixin 是否可用”。A.less@import (reference)B.less，B.less 里调用 A.less 定义的.btn()，依然报Undefined mixin '.btn'
容易被忽略的隐蔽点：第三方库和三层以上链路
循环往往不在你写的文件里。升级 Ant Design 或 Element Plus 的 Less 版本后，它们内部的 theme-chalk/base.less → variables.less → mixins.less → base.less 就可能形成新环。更麻烦的是：@import (reference) 会让问题更隐蔽——文件“看起来没输出”，但变量和 mixin 实际不可见；有些循环藏在 node_modules 某个 UI 库的子目录下，你没动一行代码，构建却突然崩了。
