冗余主因是混合重名导致多次展开。需收敛至mixins/common.less并强制括号语法，拆解万能混合为语义化小单元，用@import(reference)隔离变量作用域，杜绝隐式重复导入。
先确认冗余是不是混合重名导致的
打开编译后的 CSS，搜索高频样式块，比如 border-radius: 4px 或 display: flex，看是否在十几个不同选择器下重复出现。再用 IDE 全局搜 .btn-base()、.clearfix() 这类混合名，重点查是否散落在 components/card.less、theme/dark.less、legacy/forms.less 等多个文件里。如果同一混合名在三处以上定义，基本就是重名触发多份展开——Less 不合并，只复制。
收敛混合定义并强制括号语法
所有混合必须统一收口到 mixins/common.less，删掉其他文件里的同名定义；入口文件改用 @import (once) "mixins/common"，避免多次解析。关键动作有三个：
- 定义必须带括号：
.rounded() { border-radius: @radius-sm; }，绝不能写成.rounded { ... } - 调用也必须带括号：
.rounded();，不加会静默匹配 class 名，找不到就报Unknown word - 给每个混合加唯一指纹注释，如
// @mixin rounded v2.1，编译后搜这个字符串，确认只输出一次
拆解“万能混合”为语义化小单元
别留 .button-style(@bg, @color, @border, @radius, @hover-bg, @active-bg) 这种六参数混合——没人记得清顺序，维护时全靠猜。按职责切分：
-
.btn-size(@size: md) { ... }（控制 padding / font-size） .btn-theme(@color: @primary-color) { color: @color; background: tint(@color, 80%); }.btn-state() { &:hover { opacity: 0.9; } &:disabled { opacity: 0.5; } }
这样调用清晰：.btn-size(sm); .btn-theme(@danger-color); .btn-state();，改一个不影响其余。
用 @import (reference) 隔离变量作用域
历史代码常在各组件里重复定义 @text-color: #333，结果谁后加载谁生效，调试时样式“突然变灰”。解决方案是：
- 把所有基础变量收敛进
variables/core.less，只定义角色：@text-primary、@surface-level-1，不写具体值 - 组件文件里用
@import (reference) "variables/core"引入——它不输出 CSS，只提供变量上下文 - 禁止在组件中直接赋值：
@text-color: #222是雷区，应写成color: @text-primary;
真正难清理的不是名字撞车，而是你以为删了一个混合就完了，却没动那些藏在 @import "mixins" 宽泛路径下的隐式重复导入——它们照样让 .clearfix() 展开五次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
