Less 的 @import 默认不自动去重，多次导入同一文件会导致样式重复编译；@import (once) 可显式去重但仅对完全相同路径生效，无法解决路径别名或多入口问题，需配合顶层入口收敛和构建配置优化。
Less 的 @import 默认不做去重，同一文件被多次导入，就会原样重复编译进最终 CSS —— 这不是 bug，是设计行为。
为什么 @import 会重复输出样式
Less 不像 JS 模块系统有运行时缓存或静态分析去重机制。@import 本质是文本拼接+作用域合并：每次遇到 @import "foo.less"，就解析那个文件、展开所有变量/mixin/规则，再塞进当前上下文。如果三个组件文件都写了 @import "mixins/button.less"，那按钮相关样式就会被生成三遍。
- 常见错误现象：
button.css里出现三段一模一样的.btn { border-radius: 4px; } - 真实影响：首屏 CSS 体积翻倍、浏览器渲染选择器匹配变慢、DevTools 样式面板里同名规则堆叠难定位
- 特别注意：
@import (reference)虽能抑制输出，但只对「未被调用的 mixin/规则」生效；一旦某处调用了.btn()，它仍会完整展开 —— 所以重复导入 + 多次调用 = 双重膨胀
@import (once) 是什么，又不是什么
@import (once) 是 Less 提供的显式去重指令，它让编译器记住“这个路径已处理过”，后续相同路径的 @import 直接跳过解析。
- 它只认**完全一致的字符串路径**：
@import (once) "mixins.less"和@import (once) "./mixins.less"被视为两个文件 - 它不解决路径别名混乱问题：Webpack 的
~styles别名在 Less 编译层不可见，@import (once) "~styles/mixins"会报错或失效 - 它不能替代架构设计：如果
components/a.less和pages/home.less都各自@import (once) "variables.less"，而它们又都被index.less导入，那variables.less仍会被处理两次（因为入口不同） - 正确用法示例：
@import (once) "config/variables.less";<br>@import (once) "config/mixins.less";<br>@import "components/button.less";<br>@import "components/card.less";
比 (once) 更关键的控制点：入口收敛
靠 (once) 拦不住路径写法不统一、多入口并行编译的项目。真正管用的是把所有公共依赖收束到一个顶层入口，其他文件只负责业务样式。
- 禁止组件文件自行
@import公共文件：比如button.less里写@import "mixins/grid.less"—— 这会让构建工具无法判断依赖树，热更新失效，(once)也形同虚设 - 推荐结构：
index.less作为唯一入口，按顺序导入：@import "config/variables.less"→@import "config/mixins.less"→@import "base/reset.less"→@import "components/*.less"（仅限构建工具支持 glob 的场景） - 构建层配合：Webpack 中用
less-loader的additionalData自动注入全局变量，避免每个文件都手动 import；Gulp 中用gulp-less的paths选项统一解析路径，减少相对路径误写
最易被忽略的一点：即使你用了 @import (once)，只要构建配置没关掉 sourceMap 或保留注释，编译产物里依然可能看到重复的注释块或空行 —— 这些不影响运行，但会干扰体积统计和 diff。生产环境务必启用 compress: true 并配 strictImports: true，否则 (once) 的效果会被冗余输出掩盖。
