twitter-bootstrap - 导入 bootstrap 但仅导入一个组件

Question

我有一个 React 网站，使用本地 scss 编译为 css 文件。 但现在我只想在一个且只有一个组件中使用 Bootstrap。

我关注了https://reactstrap.github.io/并让它发挥作用。但现在bootstrap已经应用到所有网站了，因为我有这个

import 'bootstrap/dist/css/bootstrap.min.css';

在我的 index.js 文件中

如果我随后从 index.js 中取出导入并将其放入我的组件中， Bootstrap 仍会应用于整个网站。

我是否必须使用某种形式的 React css-module 加载将 bootstrap 导入到此组件中，并且仅此组件？有没有办法限制 Bootstrap 整个 css 文件的范围？

我知道在 javascript 中可以动态完成类似的事情，下面是伪代码

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

然后可以再次添加

Answer 1

您可以根据需要自定义 Bootstrap 吗？

您在 Bootstrap 网页中有该选项。只需选择您需要的组件即可应用到您需要的组件。

https://getbootstrap.com/docs/3.3/customize/

我也发现了这篇文章，我不太确定它是否与您的问题相同，但非常相似:

How to make React CSS import component-scoped?

另一个类似的帖子:

Limit the scope of bootstrap styles

您可能想检查一下。