导入 bootstrap 但只导入一个组件 [英] Import bootstrap but only into one component

问题描述

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

我已关注 https://reactstrap.github.io/ 并使其正常工作.但是bootstrap现在应用于所有站点，因为我有这个

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

在我的 index.js 文件中

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

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

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

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

然后可以再次添加

解决方案

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

您在引导程序网页中有该选项.只需选择您需要应用到所需组件的组件即可.

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

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

如何让 React CSS 导入组件范围?

另一个类似的帖子:

限制引导样式的范围

你可能想看看.

I have a React web site using a local scss compiled to css file. But now I want in one and only one of the components to use Bootstrap.

I've followed https://reactstrap.github.io/ and got it working. But bootstrap is now applied to all the site, because I have this

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

in my index.js file

If I then take the import out of index.js and place it in my component, bootstrap is still applied to the entire site.

Do I have to import bootstrap into this component and only this component using some form of React css-module loading ? Is there a way of restricting the scope of bootstraps entire css file ?

I know that in javascript something like this could be done dynamically, pseudo code below

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

then it can be added again

解决方案

You could just customize bootstrap to your needs?

You have that option in the bootstrap web page.. Just select the components you need to apply to the component you need.

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

I found this post too, which Im not quite sure if it is the same problem as yours but is quite similar:

How to make React CSS import component-scoped?

Another similar post:

Limit the scope of bootstrap styles

You might want to check it out.

这篇关于导入 bootstrap 但只导入一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！