Javascript 带有React组件的自定义引导SCS

我正在构建一个react应用程序，使用bootstrap和react bootstrap创建 我有一个定制的主题，它是一个npm包，实际上只是定义了一些变量

@myorg/theme/lib/scss/_variables.scss:

然后，在导入引导程序之前，我将其导入到我的“站点”主题中：

./src/index.scss：

现在，我希望有具有自己特定样式的组件，这些组件基于引导：

./src/components/MainLayout.scss：

然而，当我这样做的时候，它去掉了我的主题颜色，所以我必须这样做- ./src/components/MainLayout.scss：

这是正确的方法吗？每次我这样做时，它似乎都会将整个内容写入文档（引导和所有内容），而且我会为许多组件做很多工作。例如，我有另一个组件，我想在其中自定义CardColumns（实际上，无论导入如何，我都无法使其工作）：

---

在模块化组件中使用bootstrap 4的scss文件的正确方法是什么？在不增加下载大小的情况下。

我将创建1个lib.scss文件，以包含从库中导入的所有内容 像这个名字lib.scss

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";

然后，当我创建像管理模块这样的新模块时，我将像这样简单地导入

@import "./lib";
...

---

这不会为导入的每个可见组件将bootstrap和font awesome的整个样式表写入文档。/lib？正确，但您使用的是webpack吗？是的，通过创建react Apps，然后我认为您可以创建1个文件lib.js，然后将lib.scss导入其中，然后它将提取到lib.css中，这样您就可以在任何地方使用库css文件

@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
#sidebar {
  border-right: 1px solid $gray-400
}

@import "../../index.scss";
#sidebar {
  border-right: 1px solid $gray-400
}

 //@import ???? I need, functions, mixins, and variables from bootstrap
.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 10;
  }
  @include media-breakpoint-only(xl) {
    column-count: 10;
  }
}

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";

@import "./lib";
...