@import (reference) 仅抑制顶层规则输出，不自动按需；裸规则、漏括号、extend目标缺失、命名冲突及隐式调用链均会导致冗余样式。
@import (reference) 本身不生成 CSS，但必须配合显式调用（mixin 或 extend）才真正输出样式；漏掉括号、误写选择器、或间接依赖未管控，都会让“按需”失效。
为什么加了 (reference) 还是打包了没用的样式
常见错误是把 @import (reference) 当成“自动按需开关”，其实它只做一件事：抑制文件顶层规则的输出。只要文件里有未包裹在 mixin/extend 内的裸规则（比如直接写的 .btn { padding: 8px; }），哪怕加了 (reference)，也会被忽略——编译器照常展开，冗余照旧。
- 检查所有被
@import (reference)引入的文件，确保每条 CSS 规则都封装在.mixin()或%placeholder里 - 禁止出现无括号的
.clearfix、.sr-only这类声明；必须写成.clearfix() { ... } - 变量定义（
@color-primary: #007bff;）和@import语句不受影响，可放心保留
mixins 调用时括号不能省，否则变空类名
Less 把不带括号的 .btn-base 当作普通选择器处理，即使在 @import (reference) 文件中，它也会被编译成空规则 .btn-base { }，污染最终 CSS。
- 定义必须带
()：.btn-base() { padding: 6px 12px; border: 1px solid; } - 调用也必须带
()：.primary-btn { .btn-base(); }，写成.btn-base会报错或静默生成空类 - Vue/React 的 scoped 模式下，漏括号还可能让
.btn-base泄露为全局类，被其他组件意外命中
extend 需要目标选择器真实存在且已输出
@import (reference) 让 .btn “可见但不可见”——变量和 mixin 可用，但 .btn 本身不输出 CSS。这时写 .btn-primary:extend(.btn all) 会失败，因为 :extend() 找不到可合并的目标，最终退化为复制整套样式。
- 公共基础类（如
.clearfix、.text-truncate）应统一收进_extends.less，并用@import (once)引入，确保它只输出一次 - 如果必须用
:extend()，就别对@import (reference)文件里的选择器下手；改用@import "base.less"（不加 reference）显式引入基类文件 - 验证是否生效：打开编译后 CSS，搜索
.btn, .btn-primary, .btn-secondary {—— 并列选择器出现才是真合并
命名空间冲突会让 reference 形同虚设
两个文件都定义了 .size()，后导入的会覆盖前者。结果你在 A 组件里调用 .size(14px)，实际执行的是 B 文件里重写的逻辑，样式错乱却查不出源头。
- 所有 mixin 必须加前缀：
.u-btn-size()、.u-input-size()，避免裸名 - 禁止在 mixin 内部嵌套调用其他组件 mixin（如
.card()里写.button-base()），这会触发隐式依赖链，@import (reference)挡不住 - 用
lessc --verbose编译，看哪些文件被实际展开——日志里反复出现的非主入口文件，就是潜在冗余源
真正难控的不是语法，而是调用链：一个 .modal-header() 里调了 .title()，而 .title() 又调了 .text-sm()，只要其中任意一环没走 @import (reference) + 显式调用路径，整条链就全量泄露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
