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) 掩盖，必须物理解耦：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 新建 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 文件之间，你没改一行代码，却因升级版本引入了新依赖环。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！