postcss-discard-duplicates仅删除字面完全相同的规则，无法识别语义等价声明（如margin: 0与分开写的四边距），真正有效的去重需依赖cssnano的mergeLonghand和mergeRules，在AST层面归一化并合并。
postcss-discard-duplicates 只删字面重复，别指望它去重 margin: 0 和 margin: 0 0 0 0
它只匹配完全相同的 CSS 规则字符串，比如两个 .btn { color: red; } 连空格都一致才会删一个。但现实中重复几乎都是语义等价的：同个选择器下 margin: 0 和分开写的 margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0 它完全识别不了。
真正要处理的是 AST 层面的语义归一化——得先展开简写、标准化单位（0px → 0）、归并长手属性（margin + margin-top 合并计算），再比对。所以 postcss-discard-duplicates 在真实项目里基本无效，除非你手动把所有规则写成一模一样。
cssnano 的 mergeLonghand + mergeRules 才是实际生效的组合
cssnano 默认启用 mergeLonghand（合并简写/展开属性）和 mergeRules（合并同选择器下的重复声明），这才是能干掉语义重复的核心。
-
mergeLonghand把margin: 0和后续出现的margin-top: 0归一为同一语义，为合并铺路 -
mergeRules在同一选择器块内，把重复的color: red、冗余的display: block等直接去重 - 必须确保
cssnano在autoprefixer之后运行，否则前缀补全前就压缩，可能误删本该保留的带前缀声明
示例配置（postcss.config.js）：
module.exports = {
plugins: [
require('autoprefixer'),
require('cssnano')({
preset: ['default', {
mergeLonghand: true,
mergeRules: true,
normalizeWhitespace: true
}]
})
]
}
跨文件重复？靠 postcss-import 的 skipDuplicates + 扁平化结构
如果重复来自多个 @import 文件（比如 base.css 被 header.css 和 footer.css 同时引入），postcss-import 默认的 skipDuplicates: true 就起作用了——它用路径哈希去重，同一路径只解析一次。
但注意两点：
- 路径必须完全一致：
@import './vars.css'和@import 'src/vars.css'被视为两个文件 -
postcss-import必须是 PostCSS 插件链第一个，否则嵌套结构（如&.btn { &--primary {} }）在传给postcss-nesting前就被扁平化，导致合并失效
检查方法：在 pipeline 中间加 postcss-reporter，看最终输入 CSS 是否已把所有 @import 展开为单层规则——只有展平后，cssnano 的 mergeRules 才能跨源合并。
媒体查询重复必须展平到顶层，否则插件直接跳过
postcss-combine-media-query 类插件只处理顶层 @media，遇到 .card { @media (min-width: 768px) { ... } } 这种嵌套结构会完全忽略。
Less/Sass 编译后若仍保留嵌套 @media，就得改写源码：
- 所有断点统一用变量（如
@md: 768px）+ 单层 mixin（如.media-md() { @media (min-width: @md) { @content; } }） - 禁止
@media套@media，避免编译出嵌套块 - 确认构建产物中
@media是独立顶层规则，再启用postcss-combine-media-query
Vue CLI 或 CRA 默认不启用该插件，需手动加进 postcss.config.js 并验证输出。
真正的重复消除不是靠一个插件，而是 import 展平 → 媒体查询展平 → 属性归一化 → 同选择器合并 → 跨文件归并，每一步断了，后面都白搭。最容易被忽略的是插件顺序和中间产物结构——别只盯着配置项，先用 postcss-reporter 看一眼实际进来的 CSS 长什么样。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
