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

因此，我一直在为我的项目在每个单独的环境中开发所有模块。我有多个css文件的每个模块。 我从stackoverflow读到的是在生产中有一个css文件。因此，我使用了webpack“MiniCssExtractPlugin”将所有css文件提取到一个css文件中，实际上效果很好

但是有一个警告

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

例如，如果我有两个名为

a.css

和

b.css

的css文件

/*a.css*/
：根{
--color-text-1:#e4；
--彩色文本-2:#d8d8d8；
--字体大小正常：400；
--字体重量中等：500；
--字体半粗体：600；
--字体粗体：700；
}
/*b.css*/
：根{
--字体大小正常：400；
--字体重量中等：500；
--字体半粗体：600；
--字体粗体：700；
--字体颜色以上卡片：#d8d8d8；
--背景颜色以上的卡片：#252525；
}

我所期望的是捆绑的css文件

/*bundled.css*/
：根{
--color-text-1:#e4；
--彩色文本-2:#d8d8d8；
--字体大小正常：400；
--字体重量中等：500；
--字体半粗体：600；
--字体粗体：700；
--字体颜色以上卡片：#d8d8d8；
--背景颜色以上的卡片：#252525；
}

但我实际绑定的css文件是

/*实际bundled.css*/
：根{
--color-text-1:#e4；
--彩色文本-2:#d8d8d8；
--字体大小正常：400；
--字体重量中等：500；
--字体半粗体：600；
--字体粗体：700；
}
：根{
--字体大小正常：400；
--字体重量中等：500；
--字体半粗体：600；
--字体粗体：700；
--字体颜色以上卡片：#d8d8d8；
--背景颜色以上的卡片：#252525；
}

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

---

这通常是一种好的做法吗？我发现在单独的css文件中开发非常有帮助，因为我可以专注于设计模块的样式，但是现在很难将它们全部结合起来。

MinicsExtractPlugin提取css。没别的了

您的用例听起来像是CSS的“后处理”。例如，您可以使用插件尝试

postsss

和网页包

postsss加载程序

npm安装--保存dev postsss加载程序postsss

配置加载程序：

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

试试这个插件：

---

我看不出实际版本和预期版本之间的区别：@felixmosh我的坏！我刚刚编辑了是的，这看起来有点相似，但与我想要实现的略有不同。这个合并选择器有相同的规则，但在我的css文件中，我实际上有相同的选择器，我想要一些插件（如果存在的话）合并所有属性，同时在同一选择器下解析相同的属性。