@import (reference) 仅阻止直接输出CSS，但不阻止变量/mixin被间接调用时触发全量样式输出；顶层规则、路径差异、extend失效、分散定义及通配导入等问题均会导致冗余样式。
因为 @import (reference) 只控制“是否输出 CSS”，不控制“是否被间接调用”——只要某个 mixin 被任何路径实际展开，它内部引用的样式就会全量输出，哪怕你只显式调用了其中一小部分。
为什么 @import (reference) 没挡住冗余样式
这是最常被误解的一点：@import (reference) 的作用仅限于“不主动输出 CSS 规则”，但它会让所有变量和 mixin 进入当前作用域，一旦被调用（哪怕是深层嵌套中被间接调用），整个展开链上的样式都会落地。
- 比如
card.less里定义了.card() { .shadow(); .border(); }，而你在页面里写了.my-card { .card(); }，那么.shadow()和.border()就一定会输出，不管它们是否在别处被单独使用过 -
@import (reference) "mixins.less"后，如果mixins.less里有顶层语句（如html { box-sizing: border-box; }），这些语句仍会透出——(reference)不屏蔽顶层规则，只屏蔽 mixin 和 class 的直接输出 - 多个文件都
@import (reference) "base.less"，但其中一个文件误写了.base-reset { ... }（没加括号），Less 就把它当选择器处理，导致 base 样式被重复注入
:extend() 失效时反而让体积更大
:extend() 不是自动去重开关，它只在「被继承的选择器真实存在于最终 CSS 输出中」时才生效；否则编译器会退化为复制整套声明，体积不减反增。
- 常见失效：公共文件用
@import (reference) "reset.less"，但reset.less内部又@import "normalize.css"（没加(reference)），导致.btn定义被跳过，.primary-btn:extend(.btn all)只能复制规则 - 分散定义：两个不同文件分别定义了
.icon，且都没用(once)统一收口，结果编译出两套.icon，所有:extend(.icon)都指向第一个，第二个白写还占体积 - 检查方法：编译后搜索
.icon, .btn-icon这类逗号分隔的选择器——有，说明:extend成功；只有孤立的.btn-icon { }，说明继承目标没输出或路径错位
路径不一致导致 (once) 形同虚设
@import (once) 的去重逻辑非常严格：它只对**完全相同字符串路径**生效。相对路径、别名路径、大小写差异，都会被识别为不同文件。
立即学习“前端免费学习笔记（深入）”；
-
@import (once) "./mixins"和@import (once) "../shared/mixins"→ 视为两个文件，各自输出一遍 - Webpack 中配置了
lessOptions.paths = ["src/styles"]，但没把公共包路径（如node_modules/@org/ui）也加进去，@import (once) "@org/ui/mixins"就无法命中已导入的同一份 - 禁用通配导入：
@import "components/*.less"在标准 Less 中不合法，多数构建工具会静默失败或乱序加载，导致部分样式漏掉、部分重复
真正起效的按需控制手段
按需不是靠一个关键字实现的，而是靠组织方式 + 显式调用 + 构建验证三者配合。
- 所有公共 mixin 必须加前缀，如
.u-btn-base()、.u-form-size()，杜绝裸名（如.size()）引发的覆盖和误调用 - 禁止 mixin 内部嵌套调用其他组件 mixin（例如
.card()不要直接写.button-base()），改用参数传入行为或组合式调用 - 用
lessc --verbose编译时看日志，确认哪些文件被实际展开；再配合全局搜索编译后 CSS 中的类名，反推哪些 mixin 被意外触发 - 入口文件统一用绝对路径别名导入，例如
@import "ui-kit/button"，并确保 Webpack/Vite 的paths配置覆盖所有可能来源
最容易被忽略的是：HTML 结构必须与命名空间强绑定。比如你写了 .ui-kit .button { .u-btn-base(); }，但页面没加 class="ui-kit"，那所有隔离设计就归零——样式照样泄漏到全局，而且你还以为自己做了按需。
