归根结底，Less 编译后出现重复 CSS 代码，通常都和 @import、extend、mixin 这几种复用机制使用不当有关，或者说没有做好约束与管理。@import 一旦重复引入同一个文件，内容就会被反复插入；extend 如果跨文件使用前没有先导入目标，或者遗漏了 all，往往会在无提示的情况下失效；至于 mixin，只要多次调用，对应的样式代码就会被一次次展开，最终导致大量重复样式。
Less 编译后之所以会出现重复 CSS，问题通常不在语法本身，而在于 @import、extend、mixin 这三种机制没有正确使用，或者没有控制好使用边界。Less 本身不会自动执行去重处理，所谓“重复代码”，本质上就是你原本写下的结构，在编译阶段被完整展开并输出到了最终 CSS 中。
为什么 @import 会造成重复样式？
Less 默认不会做依赖去重，@import "mixins.less" 如果写了三次，就会插入三次相同内容。尤其是在多个组件文件分别 @import 同一个工具文件时，变量、mixin、extend 基类都会被重复复制，最终造成 CSS 体积膨胀。
- 使用
@import (once)替代普通@import，但要注意：导入路径必须完全一致（"./utils"和"utils"会被视为不同文件） - 将所有公共
@mixin、@function、变量统一收敛到单一入口文件（如base.less），再由主入口通过@import (once) "base.less"引入 - 避免使用通配符导入：
@import "components/*.less"在多数 Less 版本中并不生效，同时也会破坏依赖关系的可追踪性 - 构建阶段启用
strictImports: true（如 less-loader 配置或命令行参数），让缺失文件立即报错，避免静默跳过后导致部分样式缺失
extend 为什么没有合并选择器？
extend 属于编译期的选择器合并机制，并不是运行时的去重方案。它只有在目标选择器真实存在，并且语法完全匹配时才会生效；一旦失效通常不会报错，但最终结果就是生成两个彼此独立的选择器，无法达到复用与精简 CSS 的目的。
- 跨文件使用前必须显式
@import目标文件，否则.btn-primary:extend(.btn)会直接编译失败（报错 “selector not declared”） - 目标选择器不能放在
@media、嵌套块或mixin动态生成结果中——extend匹配的是最终输出的字符串，而不是代码语义 - 如果需要合并嵌套规则（例如
.btn:hover），必须添加all：.btn-primary:extend(.btn all)，否则只会合并顶层声明 - 不要使用
extend处理带参数的样式变体；它不支持变量和伪类目标（如.btn:hover:extend(.btn)无效），这类场景更适合使用mixin
mixin 调用太多，CSS 体积为什么反而变大？
mixin 本质上是文本级插入工具，每调用一次，都会完整展开其中的全部声明。一个包含媒体查询和伪类的复杂 mixin 如果被调用 10 次，就会生成 10 份几乎相同的 CSS，从而明显增加编译后文件体积。
- 高频且简单的逻辑（如
.clearfix()、.center()）适合用mixin；而包含多层嵌套、断点和状态控制的复杂逻辑，建议拆分为更细粒度的原子级单元（如.rounded-sm()、.shadow-xs()） - 避免在嵌套块中漏写
&：.card { &:hover { .transition() } }才是正确写法；.card { :hover { .transition() } }会输出全局:hover，进而污染其他元素样式 - 无参
mixin必须写空括号：.clearfix()，否则定义会被当作普通 class，调用时就会报undefined mixin - 颜色、尺寸等静态配置适合使用带参数的
mixin；而主题切换、暗黑模式等运行时响应场景，更适合使用 CSS 自定义属性，mixin只负责生成基础结构
构建阶段还能优化和补救吗？
Less 编译器本身并不负责压缩、去重或合并选择器。所谓生产环境下的 CSS 体积优化，绝大多数都依赖 PostCSS 阶段完成，而不是仅靠 Less 自身配置来解决。
- 不要依赖
lessc --clean-css，它只能做基础压缩；更建议把 CSS 输出交给cssnano或clean-css等插件处理，它们才能真正合并重复声明、删除冗余选择器 - 确保处理顺序正确：Less → CSS → PostCSS（
cssnano），不要颠倒；否则像/* @preserve */注释或兼容性 hack 这类内容可能会被错误删除 - 禁用 Less 的
merge功能（less-loader 中设置math: 'strict'），它会尝试合并相邻规则，但容易出错，并且可能与 PostCSS 处理流程发生冲突 - 绝对 URL 导入（如
@import "https://cdn.example.com/normalize.less"）会拖慢构建并增加不可控依赖，建议统一改为本地@import (reference)，或直接复制到项目内部管理
最容易被忽视的一点是：重复 CSS 往往并不是某一行 Less 代码写错了，而是整个导入链和样式复用策略没有收敛。与其只盯着某一个 mixin 是否重复，不如优先检查 main.less 的 @import 依赖树，这通常更能有效定位 Less 编译后重复代码的根源。
