Less的@import会导致CSS重复编译输出而非重复加载，因其无模块缓存机制，每次导入均原样展开；@import (once)仅对完全相同路径去重，路径差异即失效，真正有效的是入口收敛与路径标准化。
Less 的 @import 不会导致“CSS 重复加载”，而是导致“CSS 重复编译输出”——浏览器只收到一份 CSS 文件，但里面同一段样式规则（比如 .btn { padding: 8px; }）出现了三遍。这不是网络请求问题，是构建阶段的代码拼接失控。
为什么@import会原样重复展开，而不是去重
Less 没有模块缓存机制，@import "mixins/button.less" 在 A、B、C 三个文件里各出现一次，就等于把 button.less 的全部内容复制粘贴三次进最终 AST。变量、mixin、选择器全被解析并输出，没有“已导入过就跳过”的默认逻辑。
- 常见错误现象：
button.css里搜.btn能匹配出 5 条一模一样的规则 - 真实影响：Gzip 后体积仍偏高、DevTools 样式面板里点击某条
.btn会高亮多个来源、浏览器 CSSOM 构建变慢 -
@import (once)是显式指令，不是默认行为——虽然文档说 “once is the default behavior”，但实际指“不加修饰符时等价于(once)”，而多数人写的其实是无修饰符的裸@import，它确实默认去重；但一旦路径字符串稍有差异（"./mixins"vs"mixins"），去重即失效
@import (once) 的生效边界和典型失效场景
@import (once) 只对**完全相同的字符串路径**做哈希比对，不解析别名、不归一化路径、不关心语义是否等价。
- 有效：
@import (once) "config/vars.less";和另一处完全相同的写法 - 失效：
@import (once) "config/vars.less";和@import (once) "./config/vars.less";→ 视为两个文件 - 失效：
@import (once) "~styles/vars.less";→ Webpack 别名在 Less 编译层不可见，直接报File not found - 失效：组件文件
button.less自己写了@import (once) "vars.less"，而index.less也写了同一句 → 两个不同入口下独立编译，各算一次
比(once)更关键的控制点：入口收敛 + 路径标准化
靠 (once) 拦不住工程级重复，真正起效的是架构约束。
立即学习“前端免费学习笔记（深入）”；
- 所有公共
@mixin、@function、变量必须收口到单个文件（如src/styles/core/index.less），且该文件禁止@import任何其他 .less - 业务文件（
button.less、card.less）禁止自行@import公共文件，只允许用@mixin或变量 —— 它们的依赖由顶层index.less统一注入 - 顶层入口只有一份：
src/styles/index.less，按顺序写：@import (once) "core/variables.less"; @import (once) "core/mixins.less"; @import "components/button.less"; @import "components/card.less";
- 构建时只编译这一个入口，禁用
@import "components/*.less"这类通配写法（不被标准 Less 支持，且破坏可预测性）
当(once)不管用时，(reference) 是什么、不是什么
@import (reference) 不是“懒加载”，也不是“运行时按需引入”。它只是让导入的文件内容**不直接输出 CSS**，但其中定义的 @mixin 和 @function 依然可用。
- 能解决：避免
reset.less里的* { margin: 0; }被重复输出 - 不能解决：如果
button.less里调用了.btn() { ... }，而这个 mixin 定义在(reference)导入的文件里，那.btn()展开后的 CSS 仍会出现在最终输出中 —— 重复调用 = 重复输出 - 特别注意：
(reference)不解除依赖环。A.less(reference)导入 B.less，B.less 又调用 A.less 里定义的 mixin，编译仍会失败：Undefined mixin
真正容易被忽略的点是：@import 的去重能力完全依赖路径字符串一致性，而工程中路径写法天然分散。与其在每个 @import 前加 (once)，不如用 ESLint 插件（如 stylelint-less）校验路径格式，或在构建层用 PostCSS 插件提前归一化路径再交由 Less 处理。
