javascript - Cssnano 不删除重复项

Question

我有一个使用 CSS 模块的 React 网络应用程序。我正在使用 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)的问题

谢谢。

Answer 1

发生这种情况是因为您的 CSS 压缩器 (cssnano) 是 postcss-loader。加载器应用于每个分离的文件，因此 cssnano 看不到其他文件以删除跨文件的重复项。

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