时间戳

首页 > 解决方案 > 不能为 React 应用程序进行多个引导自定义

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

问题描述

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

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

我的问题是如何为 Part A 和 Part B 进行多重定制？

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

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

标签： cssbootstrap-4gridmultiple-columnscss-grid

解决方案

有两个bootstap带有先前选择器的自定义类来处理这个问题。一旦引导程序为您提供定制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%; 
}

推荐阅读