时间戳

首页 > 解决方案 > Bootstrap SASS - 覆盖主题颜色

bootstrap-4 - Bootstrap SASS - 覆盖主题颜色

问题描述

我正在使用 Bootstrap 4.6 SASS 文件，并覆盖了一些默认值。我正在按照此处的说明进行操作，其中显示了一个示例：

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

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

// Bootstrap and its default variables

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

此特定示例有效，因为在$body-bg导入下面的“可选”导入之前不使用该变量。

但是，我想更改用作主要主题的蓝色阴影。如果我试图通过$blue: #1122ff;在标记为“您的变量覆盖”的部分中定义来做到这一点，它没有明显的效果。这是因为“变量”导入定义了一个默认值，$blue 以及从它派生的一堆其他变量（如$primary）。由于该文件是在“您的变量覆盖”部分上方导入的，因此重新定义变量为时已晚。

我可以简单地将我的变量定义向上移动（在变量导入之前），这很有效，但它不仅与提供的示例不同，文档似乎专门排除了这一点：

变量覆盖必须在我们的函数、变量和 mixin 被导入之后，但在其余的导入之前。

我很困惑。在变量导入之前定义变量似乎是合乎逻辑的，否则在该文件中定义的变量有什么意义!default？

文档是错误的，还是我遗漏了什么？$blue如果我在文件顶部声明，会有不愉快的副作用吗？

标签： bootstrap-4sasssass-variables

解决方案

使您定义的那些变量“！重要”。它将覆盖变量定义。

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

推荐阅读