css - 范围或隔离 Bootstrap 样式仅在特定类或 id 下？

Question

我正在制作一个 chrome 扩展程序，它将在用户内容页面内覆盖一个 React 应用程序。我喜欢在应用程序的根 div 内使用 Bootstrap css，但 Bootstrap 样式会影响整个页面。

有什么方法可以将 Bootstrap (除了自己编辑源代码)的范围限定到特定的子元素吗？

Answer 1

我 future 的自己的另一个答案。我能够通过

在 React 应用程序中实现这一点

yarn 安装 Bootstrap

这使得 scss 文件在节点模块目录中可用。

然后不导入 bootstrap/scss/bootstrap 文件，它看起来像这样:

/*!
 * Bootstrap v4.5.0 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "utilities";
@import "print";

我制作了自己的文件 my_bootstrap.scss 并导入了它。该文件将所有其他导入范围限定为一个类 .has-bootstrap

.has-bootstrap {
  @import "bootstrap/scss/_functions";
  @import "bootstrap/scss/_variables";
  @import "bootstrap/scss/_mixins";
  @import "bootstrap/scss/_root";
  @import "bootstrap/scss/_reboot";
  @import "bootstrap/scss/_type";
  @import "bootstrap/scss/_images";
  @import "bootstrap/scss/_code";
  @import "bootstrap/scss/_grid";
  @import "bootstrap/scss/_tables";
  @import "bootstrap/scss/_forms";
  @import "bootstrap/scss/_buttons";
  @import "bootstrap/scss/_transitions";
  @import "bootstrap/scss/_dropdown";
  @import "bootstrap/scss/_button-group";
  @import "bootstrap/scss/_input-group";
  @import "bootstrap/scss/_custom-forms";
  @import "bootstrap/scss/_nav";
  @import "bootstrap/scss/_navbar";
  @import "bootstrap/scss/_card";
  @import "bootstrap/scss/_breadcrumb";
  @import "bootstrap/scss/_pagination";
  @import "bootstrap/scss/_badge";
  @import "bootstrap/scss/_jumbotron";
  @import "bootstrap/scss/_alert";
  @import "bootstrap/scss/_progress";
  @import "bootstrap/scss/_media";
  @import "bootstrap/scss/_list-group";
  @import "bootstrap/scss/_close";
  @import "bootstrap/scss/_toasts";
  @import "bootstrap/scss/_modal";
  @import "bootstrap/scss/_tooltip";
  @import "bootstrap/scss/_popover";
  @import "bootstrap/scss/_carousel";
  @import "bootstrap/scss/_spinners";
  @import "bootstrap/scss/_utilities";
}