css - React 应用程序不能有多个引导定制

Question

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

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

我的问题是如何对 A 部分和 B 部分进行多重定制？

我正在考虑 React with Webpack 的多个入口点，React with Webpack 的多个 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%; 
}

PartB 24grid

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