根本原因是@import、extend、mixin机制被误用或未收敛：@import多次引入同一文件导致内容重复；extend跨文件未导入或未加all导致静默失效；mixin调用多次则样式块重复展开。
Less 编译后出现重复 CSS，根本原因不是语法写错，而是 @import、extend、mixin 这三类机制被误用或未收敛——它不会自动 dedupe，所有“重复”都是你写的结构在编译期被忠实展开的结果。
为什么 @import 会导致重复规则？
Less 不做依赖去重，@import "mixins.less" 写三次，就插入三次内容。尤其当多个组件文件各自 @import 同一工具文件时，变量、mixin、extend 基类全被复制多遍。
- 用
@import (once)替代裸@import，但注意：路径必须完全一致（"./utils"和"utils"被视为不同文件） - 所有公共
@mixin、@function、变量统一收口到单个入口文件（如base.less），再由主入口@import (once) "base.less" - 禁用通配符导入：
@import "components/*.less"在多数 Less 版本中不生效，且破坏依赖可追踪性 - 构建时启用
strictImports: true（less-loader 配置或命令行），让缺失文件立即报错，避免静默跳过导致部分样式漏载
extend 为什么没合并选择器？
extend 是编译期选择器合并，不是运行时去重。它只在目标选择器真实存在、且语法完全匹配时才生效；失效即静默，不会报错，但你会看到两个独立选择器。
- 跨文件使用前必须显式
@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 编译器本身不压缩、不去重、不合并选择器。所谓“生产环境体积优化”，90% 靠 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 往往不是某一行代码写错了，而是整个导入链和复用策略没收敛。检查 main.less 的 @import 树，比盯着某一个 mixin 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
