@import (once) 仅对路径字符串完全一致的导入生效，无法解决别名或相对路径导致的重复导入；真正防重复需单点定义混合与变量、精确导入、文件名与混合名严格对应，并避免@import (reference)的隐式重复。
用 @import (once) 不能解决所有重复导入
很多人以为加了 (once) 就万事大吉，其实它只对「路径字符串完全一致」的导入生效。比如 @import "mixins/button" 和 @import "../styles/mixins/button"，哪怕指向同一文件，Less 也认为是两个不同导入，各自展开一次。更隐蔽的是 Webpack 中配置了 lessOptions.paths 别名后，@import "mixins/button" 和 @import "~mixins/button" 也可能被解析为不同路径。
真正有效的防重复：单点定义 + 精确导入
混合（mixin）和变量必须收敛到唯一文件，比如 mixins/common.less，且所有业务文件只允许用这一种方式导入：
- 删掉所有组件文件里自行定义的
.btn-base()、.clearfix()等重复混合 - 禁用宽泛导入：
@import "mixins"→ 改为@import "mixins/clearfix"，每个文件只暴露一个混合 - 文件名与混合名严格对应：
rounded.less只含.rounded()，不塞其他逻辑 - 入口主文件统一用
@import (once) "mixins/common"，且确保它是第一个@import
警惕 @import (reference) 带来的“假安全”
@import (reference) 确实不输出 CSS，但它不解决混合复用的可见性问题——如果 A.less @import (reference) 了 B.less，而 C.less 又直接 @import 了 A.less，C 里依然无法调用 B 定义的混合。更麻烦的是，它会让重复问题更难发现：编译不出错，但同一份 .flex-center() 被五个组件各自 @import (reference) 后再调用，最终 CSS 里照样出现五份展开体。
验证是否还有隐式重复的最快方法
编译出最终 CSS 后，搜索某个高频混合的典型样式，比如 display: flex 或 content: ""，看它是否在多个不相关的选择器下重复出现；再反查 Less 源码，全局搜索 .clearfix();（注意带分号和括号），确认调用点是否散落在 card.less、list.less、form.less 等多个文件中——只要调用点超过一处，且没走统一混合文件，就还没真正去重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
