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中，你需要做 in order to generate custom text- and bg- classes. Also see issue: https://github.com/twbs/bootstrap/issues/35297

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

Bootstrap 5 won't allow me to add additional colors to the map

css

sass

twitter-bootstrap