less混合名重复导致冗余css，因后定义同名混合会覆盖前定义，而调用若在覆盖前则展开两个版本；多文件各自定义并@import同一混合名，会各自展开而非合并。
Less混合名重复时为什么会产生冗余CSS
因为Less不检查混合（mixin）是否已定义，后声明的同名混合会覆盖前一个，但调用位置若在覆盖前，就会触发两个不同版本的展开；更常见的是多个文件各自定义了.btn-base()，又都通过@import引入，结果每个文件里调用一次，就各展开一份——不是合并，是复制。
如何定位是不是混合重名引发的冗余
打开编译后的CSS，搜索某个高频样式块（比如border-radius: 4px），看它是否在多个选择器下重复出现；再反查Less源码，用IDE全局搜索.btn-base()或对应混合名，确认是否散落在mixins/_buttons.less、components/card.less、theme/dark.less等多个地方。
- 检查
@import路径：有没有写@import "mixins/buttons"和@import "../shared/mixins/buttons"这种语义相同但路径不同的导入 - 搜
.mixin-name {（无括号）：这是未调用却输出空规则的典型痕迹，说明有人把混合当类写了 - 看调用上下文：是否在嵌套块中多次调用同一混合，比如
.card { .btn-base(); &__footer { .btn-base(); } }，这会导致.card .btn-base和.card__footer .btn-base两套
彻底解决混合重名的三个实操动作
核心原则：**一个混合只在一个地方定义，且必须加括号声明**。
- 统一收敛到
mixins/common.less，删掉其他文件里的同名混合定义；用@import (once) "mixins/common"替代所有@import "mixins/common"，避免重复解析 - 所有混合定义强制带括号：
.btn-base() { ... }，绝不用.btn-base { ... }；调用也必须带()，哪怕无参 - 对已有项目做“混合指纹”清理：给每个混合加唯一注释，如
// @mixin btn-base v2.1，编译后搜这个字符串，确认只有一处输出
比重名更隐蔽的问题：混合被多次导入导致隐式重复
即使混合名没冲突，只要@import "mixins"出现在5个组件文件里，而每个都调用.clearfix()，最终CSS就有5份.clearfix展开体——这不是重名，是导入链失控。
- 禁用
@import "mixins"这种宽泛路径，改用精确路径：@import "mixins/clearfix" - 在
mixins/目录下，每个文件只暴露一个混合，文件名与混合名严格一致（rounded.less→.rounded()） - Webpack或Vite中配置
lessOptions.paths，让所有@import "mixins/*"走统一别名，避免相对路径漂移引发的“看似不同实则重复”
@import (reference)悄悄带进十个文件，在编译期无声无息地各展开了五次。每次改混合，都得同步 grep 所有调用点和导入链。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
