Question

我正在使用bootstrap和react-bootstrap构建一个用create-react-app创建的react-app 我有一个自定义主题，它是一个npm包，实际上只是定义了一些变量。

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

$theme-colors: (
 primary: #FFFF,
 // etc...
)

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

./ src / index.scss：

@import "~@myorg/theme/lib/scss/_variables.scss";
@import '~bootstrap/scss/bootstrap.scss';

现在，我想拥有在引导程序基础上构建的具有自己特定样式的组件：

./ src / components / MainLayout.scss：

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

但是，当我这样做时，它会摆脱主题色，所以我必须这样做- ./ src / components / MainLayout.scss：

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

这是正确的方法吗？每次执行此操作时，似乎都将整个内容写入文档（包括引导程序和所有内容），并且我将对许多组件进行很多操作。例如，我还有另一个要自定义CardColumns的组件（无论导入如何，我实际上都无法使它工作）：

 //@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;
  }
}

在模块化react组件中使用bootstrap 4的scss文件的正确方法是什么？不会使下载大小膨胀。

Answer 1

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

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

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

@import "./lib";
...

具有React组件的自定义Bootstrap SCSS

1 个答案: