less编译重复样式主因是@import未控、extend误用、mixin展开失控；须用@import (once)、统一入口index.less、拆分mixin、避免嵌套@media，并确保postcss在压缩前处理。
Less编译后出现重复样式，不是 CSS 压缩没做好，而是源码组织或导入方式出了问题——@import 没加控制、extend 误用、mixin 展开失控，这三类原因占了 90% 以上。
为什么 @import 会导致重复 CSS
Less 不做语义去重，@import "mixins.less" 出现 3 次，就输出 3 份 mixin 展开结果。尤其在组件级文件各自 @import 公共文件时，极易爆炸。
- 必须用
@import (once)替代裸@import，例如：@import (once) "variables.less"; -
(once)只对**完全相同路径**生效，"./mixins"和"../shared/mixins"被视为两个文件 - 更稳妥的做法是设一个统一入口
index.less，所有文件只@import "index"，再由它集中@import (once)其他模块 - 禁用通配符导入（如
@import "mixins/*.less"），这类写法在不同构建工具中行为不一致，且无法被(once)控制
extend 为什么没合并选择器
extend 是编译期静态匹配，不是运行时继承，失效时静默不报错，看起来就像“重复没去成”。
-
.btn-primary:extend(.btn)要求.btn必须在**同一编译上下文**中已定义，跨文件未@import就直接失效 - 嵌套规则默认不参与匹配，
.btn:hover不会被.btn-primary:extend(.btn)合并，得显式写.btn-primary:extend(.btn all) -
extend只认最终选择器字符串，.container .btn和.btn是两个不同目标，不能互相 extend - 如果目标选择器本身被包裹在
@media或其他嵌套块里，外部调用:extend()会直接失败
如何让 mixin 不展开成重复块
mixin 每次调用都展开一份副本，若参数不变但调用分散，就会生成视觉上重复的 CSS 规则。
- 用
guard控制展开条件，比如：.button-size(@size) when (@size = large) { font-size: 1.25rem; }，避免无用规则进入输出 - 避免把所有逻辑塞进一个“万能 mixin”，应按职责拆分：
.border-radius()、.transition-base()、.text-color()，各司其职 - 禁止在 mixin 内部硬编码值，全部引用变量，否则改色值时需逐个修改 mixin 调用点
- 如果多个组件需要完全一致的样式块，优先考虑用基础类（如
.card-base）+ 类组合，而非反复调用同名 mixin
PostCSS 合并不了媒体查询？先看编译产物
Less 本身不合并 @media，PostCSS 插件（如 postcss-combine-media-query）只处理顶层扁平结构，嵌套的 @media 它直接跳过。
- 检查编译后的 CSS：是否所有
@media都在最外层？如果不是，说明 Less 里写了嵌套媒体查询（如.card { @media (...) { ... } }），得改成单层@mixin media-md() { @media (min-width: 768px) { ... } } - 确保 PostCSS 在
css-minimizer-webpack-plugin之前执行，压缩后结构被破坏，插件就失效了 - Webpack 中默认不启用媒体查询合并，需在
postcss.config.js显式添加postcss-combine-media-query - 真正重复的媒体查询，90% 源于多个文件各自
@import "breakpoints.less"且没加(once)，得回 Less 源码查导入链，不是 PostCSS 能修的
最容易被忽略的点：你以为在“去重”，其实是在掩盖导入失控。编译产物里的重复，95% 以上都能在 @import 链和变量/mixin 使用方式里找到根因，而不是靠后期工具硬擦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
