如何使用 webpack 将所有 CSS 文件提取到一个文件中，解析同名 css 选择器？

Question

所以我一直在为每个单独的环境中的项目开发所有模块。每个模块都有多个 css 文件。 我从 stackoverflow 中了解到的是在生产中拥有一个 css 文件。所以我使用 webpack 'MiniCssExtractPlugin' 将所有 css 文件提取到一个 css 文件中，它实际上工作得很好。

但是有一个警告。

这个 'MiniCssExtractPlugin' 所做的基本上是将所有 css 文件连接到一个 css 文件中。我认为它要做的是，如果有相同名称的 css 选择器，它将把它集成到一个 css 选择器中，并合并存在于一个文件中但不存在于另一个文件中的该选择器的所有属性。

例如，如果我有两个名为 a.css 和 b.css 的 css 文件，

/* a.css */
:root {
  --color-text-1: #e4e4e4;
  --color-text-2: #d8d8d8;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
}

/* b.css */
:root {
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --card-above-font-color: #d8d8d8;
  --card-above-bg-color: #252525;
}

我期望捆绑的 css 文件会是什么

/* bundled.css */
:root {
  --color-text-1: #e4e4e4;
  --color-text-2: #d8d8d8;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --card-above-font-color: #d8d8d8;
  --card-above-bg-color: #252525;
}

但我实际捆绑的 css 文件是

/* actual bundled.css */
:root {
  --color-text-1: #e4e4e4;
  --color-text-2: #d8d8d8;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
}

:root {
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --card-above-font-color: #d8d8d8;
  --card-above-bg-color: #252525;
}

所以我的问题是，如何将所有 CSS 文件提取到一个文件中，使用 webpack 解析相同命名的 css 选择器？

这是一个通常的好习惯吗？我发现在单独的 css 文件中进行开发非常有帮助，因为我可以只专注于设置该模块的样式，但是现在将它们全部组合起来有点困难。

Answer 1

MiniCssExtractPlugin 提取 CSS。仅此而已。

您的用例听起来像是对 CSS 进行“后处理”。例如，您可以尝试 postcss 和带有插件的 Webpack postcss-loader。

npm install --save-dev postcss-loader postcss

配置加载器：

rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],

试试这个插件：

https://github.com/georgeadamson/postcss-merge-selectors