将 bootstrap 的 CSS 用于单个 react-bootstrap 组件而不是整个项目答案

【问题标题】：Use bootstrap's CSS for single react-bootstrap component rather than across the whole project将 bootstrap 的 CSS 用于单个 react-bootstrap 组件而不是整个项目
【发布时间】：2020-07-24 11:10:37
【问题描述】：

我正在开发一个使用 react-bootstrap 中的 Carousel 的项目。这仅适用于我在应用程序中import "bootstrap/dist/css/bootstrap.min.css";。问题是这样做会改变整个应用程序的 CSS，它有很多现有的 UI，然后我需要重做。有没有办法只为轮播组件使用引导 CSS，而让我的 React 应用程序的其余部分不理会？

我尝试在使用轮播组件的文件中而不是在 App.js 中导入 bootstrap.min.css。不过这似乎没什么区别。

【问题讨论】：

标签： reactjs react-bootstrap bootstrap-carousel

【解决方案1】：

解决方案 1： Bootstrap 提供了通过 scss 选择性地包含组件的选项。这要求您有一个为您处理 scss 的构建设置，例如webpack、rollup 或 node-sass 本身。

编辑：添加了最少的所需 scss 类集。引导程序 4.5

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/_variables";
@import "../node_modules/bootstrap/scss/_mixins";
@import "~bootstrap/scss/_carousel.scss";

代码 sn-p 显示了设置轮播样式所需的主要部分。但是，如果您查看carousel.scss，那么您还必须导入引导函数的各种依赖项。这样就可以使用您所需的样式进行最小引导配置。

解决方案 2： 您可以在 Web 组件中限定组件及其样式。这样bootstrap.min.css 就不会从轮播 Web 组件中泄漏样式。这种方法超出了问题范围，不考虑轮播如何与应用程序的其余部分一起工作，因为事件和 JS 交互也将被限定。

【讨论】：

感谢您的详尽解释和示例。这真的很有帮助！