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

【问题标题】：Conditially override scss variables for bootstrap 4 theme switching有条件地覆盖 scss 变量以进行 bootstrap 4 主题切换
【发布时间】：2020-02-28 02:54:08
【问题描述】：

根据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 捆绑的一部分。

【问题讨论】：

您尝试覆盖您在 scss 文件末尾导入的变量。所以实际上这个 bootstrap scss 文件会覆盖你之前写的变量。尝试先导入文件，然后覆盖变量。
这是一种使用 sass 创建暗光主题的方法：=> medium.com/@katiemctigue/…。这是一个很好的方法，就我个人而言，也许还有很多其他方法，也许比这更好，但这对我来说是一个起点。我希望这个方法也对你有帮助:-)

标签： css twitter-bootstrap webpack sass create-react-app

【解决方案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";

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

【讨论】：

这是一个选项，但我使用的是使用 webpack 的 create-react-app；他们建议通过 js 导入引入引导程序。因此，这样做会将其从整个 webpack 捆绑中分离出来。我会将此添加到我的问题中。

【解决方案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....

}

【讨论】：

找这个很久了。通过类名控制主题比完整的 CSS 文件替换更方便，专门用于引导 sass 组件的选择性定制。