Cssnano不会删除重复的

Question

我有一个反应web应用程序，我在那里使用CSS模块。我用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看不到其他文件来删除跨文件的重复文件。

使用迷你-css-提取-插件。这个插件也使用cssnano。但是，它在将每个文件连接到一个大包后调用cssnano。因此，cssnano将看到所有的CSS，并且能够在整个包中删除重复的CSS。