无法将CssNano的discardDuplicates作为独立插件使用的问题

你遇到的问题核心是对cssNano插件discardDuplicates的功能理解偏差：它的作用是移除完全重复的规则（即选择器和所有CSS属性完全一致的重复代码），而不是合并相同选择器下的不同属性。你需要合并两个body选择器的需求，得靠mergeRules插件实现。

解决方案步骤 #

1. 安装cssnano-plugin-merge-rules（如果未安装）：

npm install cssnano-plugin-merge-rules --save-dev

2. 修改vite.config.js中的cssNano配置，添加mergeRules插件：

import { defineConfig } from 'vite';
import cssnano from 'cssnano';
import discardUnused from 'cssnano-plugin-discard-unused';
import colormin from 'cssnano-plugin-colormin';
import discardDuplicates from 'cssnano-plugin-discard-duplicates';
import mergeRules from 'cssnano-plugin-merge-rules';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        cssnano({
          plugins: [
            discardUnused(),
            colormin(),
            discardDuplicates(),
            mergeRules() // 新增此插件合并相同选择器的不同规则
          ]
        })
      ]
    }
  }
});

效果验证 #

配置完成后，你的测试CSS会被处理为：

body{margin:0;padding:0;height:100vh;display:flex;background:#5ad85a}

• discardUnused移除了未使用的@keyframes fadeOut
• colormin将hsl(134, 50%, 50%)转换为十六进制#5ad85a
• mergeRules合并了两个body选择器的所有属性

补充说明 #

如果你的场景中存在完全重复的规则（比如两个body的属性完全一致），discardDuplicates才会生效，它会删除其中一个重复的规则。而你当前的需求是合并同选择器的不同属性，这不属于它的处理范畴。

内容的提问来源于stack exchange，提问作者Hypnorise