Less循环引用不报语法错误而致卡死或内存溢出，根本原因是@import为文本拼接而非模块加载；有效定位法是用postcss-import替换原生@import以输出完整链路，或删reference/inline导入触发变量未定义错误，再通过注释搜索快速绘依赖图；解耦必须新建原子tokens.less作为唯一根文件，禁止其再导入其他文件，且@import(reference)无法解决作用域问题，仅抽离tokens或下沉JS层才真正安全。
Less 文件循环引用不会报“语法错误”，而是让编译器卡死或爆内存——FATAL ERROR: Allocation failed - JavaScript heap out of memory 或静默卡住，根本原因是 @import 是文本拼接，不是模块加载。
怎么快速定位循环链路
别翻文件找 @import，Less 自身不输出路径。真正有效的办法是借构建工具暴露依赖流：
- 在 Webpack/Vite 中用
postcss-import替换原生@import，报错时会直接打出完整链路，例如A.less → B.less → C.less → A.less - 临时删掉所有
@import (reference)和@import (inline)，让所有导入都实际输出内容——循环会立刻触发Variable @xxx is undefined或Cannot access property，比卡死更易抓 - 在疑似文件顶部加
// @DEBUG: imported by X注释，全局搜索imported by，5 分钟内画出依赖图
怎么拆解 typograhy.less 和 spacing.less 互引
不能靠 @import (multiple) 掩盖，必须物理解耦：
- 新建
core/tokens.less，只放原子变量：@space-xs: 4px;、@font-size-sm: 12px;，不写选择器、不写 mixin - 把
typography.less和spacing.less中互相引用的部分全删掉，改从tokens.less读取 - 确保
tokens.less是项目中第一个被@import的文件（如放在index.less最顶部） -
tokens.less禁止再@import任何其他.less文件——它必须是依赖树的根
为什么 @import (reference) 救不了循环
@import (reference) 只控制“样式是否输出”，不解决“变量/mixin 是否可用”：
立即学习“前端免费学习笔记（深入）”；
- 如果
A.less用@import (reference)导入B.less，又在B.less里调用A.less定义的.btn()，编译仍报Undefined mixin '.btn' - 因为
A.less的内容还没进作用域，reference不改变解析顺序 - 真正安全的复用只有两种：抽成独立
tokens.less，或把逻辑下沉到 JS 层（比如用 CSS 自定义属性 + JS 计算值）
容易被忽略的隐蔽点
循环往往藏在三层以上 @import 链里，且 reference 修饰符会让问题更难发现——它让文件“看起来没输出”，但变量和 mixin 依然不可见；更麻烦的是，有些循环发生在第三方 UI 库的 Less 文件之间，你没改一行代码，却因升级版本引入了新依赖环。
