javascript - Cssnano不会删除重复项

我有一个我使用CSS模块的React Web应用程序。我正在使用Webpack构建应用程序。

来自webpack.config.js的相关部分：

  {
    test: /\.css$/,
    use: extractCSS.extract(
    {
      fallback: 'style-loader',
      use: [{
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: () => [
              require('autoprefixer')({}),
              require('postcss-discard-empty')({}),
              require('postcss-discard-comments')({}),
              require('postcss-color-function')({}),
              require('postcss-flexbugs-fixes')({}),
              require('cssnano')({
                preset: ['default', {
                  discardComments: {
                    removeAll: true,
                  },
                  colormin: false,
                  cssDeclarationSorter: false,
                }],
              }),
            ],
          },
        },
      ],
    }),
  },

缩小似乎起作用。我可以在CSS中找到一些重复的CSS规则，如下所示



我想知道这是我的配置还是我使用的工具（PostCss和CssNano）有问题

谢谢。

最佳答案

发生这种情况是因为您的CSS缩小器（css​​nano）为postcss-loader。加载程序将应用于每个分离的文件，因此cssnano看不到其他文件，无法删除文件中的重复项。

使用mini-css-extract-plugin。该插件也使用cssnano。但是在将每个文件连接到一个大包之后，它将调用cssnano。结果，cssnano将同时看到所有CSS，并能够删除整个捆绑包中的重复项。

关于javascript - Cssnano不会删除重复项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52564625/