根本原因是隐式依赖环导致Less线性展开失败；应通过postcss-import暴露循环链路、拆解为原子tokens.less、严格分层导入并禁用reference来解决。
Less 文件相互 @import 导致编译失败（如变量未定义、Cannot access property、或构建卡死），根本原因不是语法错，而是文件间形成了隐式依赖环——A 依赖 B 的变量，B 又依赖 A 的 mixin，而 Less 不做依赖拓扑排序，只按导入顺序线性展开。
检查循环依赖链的最快方法
别靠肉眼翻文件。Less 编译器本身不报具体循环路径，但构建工具能暴露它：
- 用
postcss-import替代原生@import：在 Webpack/Vite 中配置后，它会在报错时打出完整链路，例如A.less → B.less → C.less → A.less - 临时禁用所有
(reference)和(inline)，让所有@import都实际输出内容——循环会立刻触发变量未定义或重复定义错误，比静默错位更易定位 - 在疑似循环的文件顶部加
// @DEBUG: imported by X注释，再全局搜索引用关系，快速画出依赖图
拆解循环依赖的实操步骤
发现 typography.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 层级规则
Less 没有模块作用域，@import 就是文本拼接+作用域合并。层级混乱等于自埋雷：
立即学习“前端免费学习笔记（深入）”；
- 基础层（可被所有文件导入）：
variables.less、mixins.less、functions.less—— 它们之间也不能互相@import - 中间层（只允许导入基础层）：
reset.less、grid.less、typography.less - 组件层（只允许导入基础层 + 中间层）：
button.less、card.less—— 禁止组件间@import - 主入口
index.less只负责串联，不写样式逻辑；禁止直接@import "pages/home.less"，页面样式应由 JS 按需加载
为什么 reference 修饰符救不了循环
@import (reference) "mixins.less"; 只解决“样式是否输出”，不解决“变量和 mixin 是否可用”。如果 A.less 用 (reference) 导入 B.less，又在 B.less 里调用了 A.less 定义的 .btn()，编译时仍会报 Undefined mixin '.btn' —— 因为 A.less 的内容还没被解析到作用域里。
真正安全的复用方式只有两种：抽成独立 tokens.less，或把逻辑下沉到 JS 层（比如用 CSS 自定义属性 + JS 计算值）。文件级 @import 的依赖关系，永远比人脑维护的文档更真实、也更脆弱。
