Bootstrap 5 不允许我向地图添加其他颜色

Question

我在为 bootstrap 的颜色图添加颜色时遇到问题。

这是我当前的导入文件：

// Required bootstrap components
@import "../../../node_modules/bootstrap/scss/functions";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

@import "../../../node_modules/bootstrap/scss/variables";
// `$theme-colors` is one of the variable that's declared in variables.scss
// therefore this line of code has to be placed after the variables import
$theme-colors: map-merge($theme-colors, $custom-colors);
// but in order for this to take effect it needs to be before the variables import

// Custom bootstrap
// This file has nothing in it, hence commented
//@import "_custom";

@import "../../../node_modules/bootstrap/scss/mixins";
@import "../../../node_modules/bootstrap/scss/utilities";
.
.
.

根据 bootstrap 的文档，默认覆盖必须声明为 before the variables import，但为了使用现有变量，需要将其放在变量导入之后。

上面的代码没有添加自定义颜色，也没有报错。

Zim 的答案有效，但不适用于 bg-[color] 类，如下所示：

    <!-- Works -->
    <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
    <div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
    <div class="p-3 mb-2 bg-success text-white">.bg-success</div>
    <div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
    <div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
    <div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
    <div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
    <div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
    <div class="p-3 mb-2 bg-body text-dark">.bg-body</div>
    <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
    <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

    <hr>
    
    <!-- Doesn't work -->
    <div class="p-3 mb-2 bg-custom-primary text-white">.bg-custom-primary</div>
    <div class="p-3 mb-2 bg-custom-secondary text-white">.bg-custom-secondary</div>
    <div class="p-3 mb-2 bg-custom-success text-white">.bg-custom-success</div>
    <div class="p-3 mb-2 bg-custom-danger text-white">.bg-custom-danger</div>
    <div class="p-3 mb-2 bg-custom-warning text-dark">.bg-custom-warning</div>
    <div class="p-3 mb-2 bg-custom-info text-dark">.bg-custom-info</div>
    <div class="p-3 mb-2 bg-custom-light text-dark">.bg-custom-light</div>
    <div class="p-3 mb-2 bg-custom-dark text-white">.bg-custom-dark</div>
    <div class="p-3 mb-2 bg-custom-body text-dark">.bg-custom-body</div>
    <div class="p-3 mb-2 bg-custom-white text-dark">.bg-custom-white</div>
    <div class="p-3 mb-2 bg-custom-transparent text-dark">.bg-custom-transparent</div>

我正在使用 Bootstrap 5.1.3

如何向 bootstrap 5 添加自定义颜色？

Answer 1

我不确定您在 _custom 中有什么，但您创建的 $custom-colors 映射应该可以正常生成其他颜色。

首先导入函数和变量，将$custom-colors 映射与$theme-colors 合并，最后是@import bootstrap（您可以导入整个东西，也可以像以前那样单独导入模块）：

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

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

$theme-colors: map-merge($theme-colors, $custom-colors);
      
@import "../../../node_modules/bootstrap";

SASS demo

另一个需要注意的重要事情是，在 5.1.x 中，您需要执行 more as explained here 才能生成自定义 text- 和 bg- 类。另见问题：https://github.com/twbs/bootstrap/issues/35297