【问题标题】:Import bootstrap but only into one component导入引导程序,但只导入一个组件
【发布时间】:2018-05-07 15:45:24
【问题描述】:

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

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

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

在我的index.js 文件中

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

我是否必须使用某种形式的 React css-module loading 将 bootstrap 导入到这个组件中,并且只有这个组件?有没有办法限制引导整个 css 文件的范围?

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

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

然后可以重新添加

【问题讨论】:

    标签: twitter-bootstrap reactjs


    【解决方案1】:

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

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

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

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

    How to make React CSS import component-scoped?

    另一个类似的帖子:

    Limit the scope of bootstrap styles

    您可能想检查一下。

    【讨论】:

      猜你喜欢
      • 2020-04-04
      • 1970-01-01
      • 2021-08-28
      • 1970-01-01
      • 2020-11-20
      • 2021-12-01
      • 2018-04-25
      • 1970-01-01
      • 2020-07-12
      相关资源
      最近更新 更多