Bootstrap5不允许我向地图添加其他颜色-编程知识-白鹭情

我在为引导程序的颜色映射添加颜色时遇到问题。

这是我当前的汇入档案：

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

根据引导程序的档案，默认覆写必须在变量汇入之前宣告，但为了使用现有变量，它需要放在变量汇入之后。

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

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>

我正在使用引导程序5.1.3

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

uj5u.com热心网友回复：

我不确定您在 _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";