导入引导程序,但只能导入一个组件

时间:2017-11-23 16:04:55

标签: twitter-bootstrap reactjs

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

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

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

在我的index.js文件中

如果我从index.js中取出导入并将其放入我的组件中,则bootstrap仍会应用于整个站点。

我是否必须使用某种形式的React css-module加载将引导程序导入此组件并仅导入此组件?有没有办法限制bootstraps整个css文件的范围?

我知道在javascript中这样的东西可以动态完成,下面是伪代码

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

然后可以再次添加

1 个答案:

答案 0 :(得分:3)

您可以根据需要自定义引导程序吗?

您在引导程序网页中有该选项。只需选择您需要应用于所需组件的组件。

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

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

How to make React CSS import component-scoped?

另一篇类似的帖子:

Limit the scope of bootstrap styles

您可能想要查看它。