css - 有条件地覆盖 scss 变量以进行 bootstrap 4 主题切换

Question

根据 Bootstrap docs ,

Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in 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 创建的网络应用程序中使用 bootstrap，他们建议将 bootstrap 导入为 detailed here .如果我只生成 2 个单独的样式表，我会手动将它们复制到我的/public 文件夹并引用，它们不会成为 webpack 捆绑的一部分。

Answer 1

这是我采用的解决方案:

// 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....

}