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

Question

我正在开发一个使用 react-bootstrap 中的 Carousel 的项目。仅当我在应用程序中 import "bootstrap/dist/css/bootstrap.min.css"; 时才有效。问题是这样做会改变整个应用程序的 CSS，它有很多现有的 UI，然后我需要返工。有没有一种方法可以仅将 bootstrap CSS 用于轮播组件，而让我的 React 应用程序的其余部分单独使用？

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

Answer 1

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

编辑：添加了最少的必需 scss 类。 bootstrap4.5

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

代码片段显示了设置轮播样式所需的主要部分。但是，如果您查看 carousel.scss，则您还必须导入 bootstrap 函数的各种依赖项。这样就可以根据您所需的样式进行最小 bootstrap 配置。

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

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

Use bootstrap's CSS for single react-bootstrap component rather than across the whole project

reactjs

react-bootstrap

bootstrap-carousel