不能为 React 应用程序进行多个引导程序自定义

Question

我有一个 React 应用程序。 在这个应用程序中，我有 2 个独立的大部分，我们称它们为 Part A 和 Part B。

对于我想要的每个部分，我都有不同的 SCSS 规则，并且我正在尝试有不同的 Bootstrap 网格系统自定义。对于 A 部分，我想要 24 列，对于 B 部分，我想要 16 列网格系统。 Bootstrap 允许只有一个自定义文件，我在其中放置了许多列。如果我放置多个自定义文件，它们会相互冲突。

我的问题是如何对 Part A 和 Part B 进行多重自定义？

我正在考虑使用 Webpack 使用 React 的多个入口点，使用 Webpack 使用 React 的多个 HTML 文件，但是这个解决方案对我没有太大帮助。

这里最好的解决方案是什么？如何为每个模块进行多个 webpack 自定义？

Answer 1

有两个自定义bootstap 类和优先选择器来处理这个问题。 一旦 bootstrap 为您提供自定义 css，您需要使用之前的选择器类更改 css，这允许您的 css 只有在您拥有选择器类时才能工作。

例如

PartA 12 格

.partAClass .row{
 margin-left:0;
 margin-right:0
}
.partAClass .col-md-12{ 
  width: 100%; 
}

带有 24grid 的 B 部分

.partBClass .row{
 margin-left:10px;
 margin-right:10px;
}
.partBClass .col-md-12{ 
  width: 50%; 
}