2

我有一个使用 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 规则，如下所示

CSS

我想知道这是否是我的配置或我正在使用的工具（PostCss 和 CssNano）的问题

谢谢。

4

1 回答 1

4

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

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

于 2018-09-29T03:43:59.820 回答