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

Question

我在向引导程序的颜色图添加颜色时遇到问题。

这是我当前的导入文件：

// 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 的文档，默认覆盖必须在变量导入之前声明，但为了使用现有变量，需要将其放置在变量导入之后。

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

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

// 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 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演示

另一件需要注意的重要事情是，在 5.1.x 中，您需要执行更多操作（如此处所述）才能生成自定义text-和bg-类。另请参阅问题：https ://github.com/twbs/bootstrap/issues/35297