直接用@import会全量内联文件内容，未调用的样式也被打包；@import(reference)仅导入变量和mixin而不输出css，但需显式调用才生成样式，且无法阻止间接调用链和命名冲突导致的冗余。
为什么直接用 @import 会把没用的样式也打包进去
Less 的 @import 默认是“全量内联”行为：只要写了 @import "button.less"，不管里面定义的 .btn-base() 是否被调用，整个文件内容都会被展开进最终 CSS。结果是按钮、弹窗、表格的样式全进了首屏资源，哪怕你只用了 .button。
真正起作用的是 @import (reference) —— 它只让变量和 mixin 可用，不输出任何 CSS 规则。但很多人漏掉括号里的 reference，或者误以为加了就自动“按需”，其实它只是第一步。
-
@import "button.less";→ 全量输出所有规则（即使没调用） -
@import (reference) "button.less";→ 只导入.button-base()等 mixin，不生成任何选择器 - 必须显式写
.button-primary { .button-base(); .button-theme(primary); }，样式才真正输出
@import (reference) 后为什么还是有冗余 CSS
常见原因是 mixin 被间接调用。比如你在 .card() 里写了 .shadow() 和 .border()，而 .card() 被调用了，那 .shadow 和 .border 就一定会输出——@import (reference) 挡不住这种链式调用。
另一个坑是命名冲突：button.less 和 input.less 都定义了 .size()，后导入的会覆盖前者，导致尺寸逻辑错乱，最后只能靠加前缀硬扛。
- 检查所有 mixin 是否有裸名（如
.size()），改用命名空间前缀，例如.u-btn-size()、.u-input-size() - 避免在 mixin 内部嵌套调用其他组件 mixin，比如
.card()不要直接调用.button-base()，而是通过参数或组合方式解耦 - 用
lessc --verbose编译时加日志，看哪些文件被实际展开，定位隐式依赖
如何用命名空间保证样式不泄漏到全局
Less 没有模块作用域，@import (reference) 只解决“是否输出”，不解决“输出到哪”。如果 .button-base() 里写了 button { ... } 或 &:hover，编译后就是全局 button 标签或任意位置的 hover，根本不受控。
正确做法是强制所有样式包裹在唯一顶层类名下，比如 .ui-kit，且 HTML 必须手动加这个 class。否则所谓“隔离”只是幻觉。
- 所有组件 mixin 内部禁止出现裸选择器（
button、.el-input）或&:hover；hover 逻辑应封装在.u-btn-state()里，由调用方控制上下文 - 写法必须是：
.ui-kit .button { .u-btn-base(); .u-btn-size(medium); } - HTML 必须对应：
<div class="ui-kit"><button class="button">点我</button></div> - 弹窗等挂载到
body的组件，也要动态给其根元素加class="ui-kit"，否则样式失效
Vite/webpack 中配置 @import (reference) 的关键点
构建工具本身不干预 Less 的 @import 行为，loader 只负责传参和编译。所以不是“配对就能按需”，而是“配对后仍需语法配合”。很多团队卡在这里：less-loader 升级了，但业务代码还用着旧式全量 @import。
尤其注意路径问题：@import (reference) "@/styles/button.less" 在 Vite 中会报错，因为 less-loader 不走 Webpack alias，@/ 别名在字符串里无效。
- Webpack 中确保
less-loader版本 ≥ v7，且less依赖 ≥ 3.10.0（老版本不识别reference） - Vite 中路径必须写死相对路径，比如
@import (reference) "../src/styles/button.less"，或在lessOptions.paths中显式添加path.resolve(__dirname, "src/styles") - 禁止在
css.preprocessorOptions.less.additionalData里塞完整组件库入口（如@import "ant-design-vue/lib/style/index.less"），这会让每个组件都带上全部样式 - 只允许
additionalData注入基础变量和工具 mixin，具体组件样式必须由开发者在单个文件里显式@import (reference)+ 调用
.btn()，和一百个 @import (reference) 并不能减少哪怕一行冗余 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
