Question

根据Bootstrap docs

Bootstrap 4中的每个Sass变量都包含！default标志，允许您可以在自己的Sass中覆盖变量的默认值，而无需修改Bootstrap的源代码。根据需要复制和粘贴变量，修改其值，并删除！default标志。如果一个变量有已经分配，那么默认情况下不会重新分配 Bootstrap中的值。

所以他们建议您像这样创建自己的主题：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

我想做的是有两组变量，并使用它在明暗主题之间切换：

// Your variable overrides
body.light-mode {
  $body-bg: #fff;
}
body.dark-mode {
  $body-bg: #000;
}
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

但是，我认为这似乎行不通，因为变量是如何划分范围的。

这可能吗？理想情况下，我希望在自己的文件中包含亮和暗变量。

在某些情况下；我在由create-react-app创建的Web应用程序中使用引导程序，他们建议将引导程序导入为detailed here。如果我仅生成了2个单独的样式表，则需要将它们手动复制到我的/ public文件夹中并进行引用，并且它们不会成为webpack捆绑的一部分。

Answer 1

那行不通。为什么不制作两个不同的主题-深色/浅色：

浅色主题（light-theme.scss）：

// Your variable overrides
$body-bg: #fff;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

黑暗主题（dark-theme.scss）：

// Your variable overrides
$body-bg: #000;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

然后根据需要将适当的样式表拖入页面？

Answer 2

这是我的解决方案：

// Default theme
$body-bg: #fff;
// etc...

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

// dark theme, turned on by adding class dark to document.documentElement (html tag)
.dark {
  $body-bg: #000;
  // etc...

  // Import just the things you customize 
  @import "~bootstrap/scss/functions";
  @import "~bootstrap/scss/variables";
  @import "~bootstrap/scss/mixins";

  @import "~bootstrap/scss/tables";
  @import "~bootstrap/scss/button-group"
  // etc....

}

引导性地覆盖scss变量以进行引导4主题切换

2 个答案: