Bootstrap 5 - 自定义主题颜色不更新类

Question

我刚刚使用 Bootstrap 5 开始了一个新项目，我正在尝试使用一些自定义值设置主题颜色。然而，按照我一直做的方式做这件事给我带来了一些问题。

我创建了三种颜色：$primary、$secondary、$tertiary。但是，如果我添加任何类（例如 bg-tertiary），则不会发生任何变化，就好像它不存在一样。bg-primary 仅使用 Bootstrap 定义的默认颜色。

我的代码如下：

@import "bootstrap/_functions";
@import "bootstrap/_variables";

$primary: #ec008c;
$secondary: #1ab7ea;
$tertiary: #3fb247;

$theme-colors: (
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "light": $light,
    "dark": $dark,
);

@import "bootstrap/bootstrap";

如果我更改默认值（例如“dark”）以使用 $tertiary，则 scss 文件中使用 $dark 的任何代码都会更改为使用 $tertiary 中的值。就像下面这样：

$theme-colors(
    "dark": $tertiary
);

#pageFooter {
   background: $dark; //This becomes #3fb247 the value from $tertiary
}

我究竟做错了什么？我不明白为什么 scss 文件中的变量会受到 $theme-colors 更改的影响，但类却不会。

编辑：

使用 chrome 检查器我可以看到 .bg-primary 使用 css 变量 --bs-primary-rgb。查看可用变量 --bs-primary 已更改为我设置的颜色，但不是 --bs-primary-rgb。

我怎样才能改变这个变量。应该自动完成吗？

经过进一步研究，这些 rgb 变量似乎已在 Bootstrap 5.1 中引入。我找不到太多有关如何将变量更新为我的设置值的信息，可能是因为它太新了。所以我选择恢复到 5.0.2，现在一切都按我的预期运行。

Answer 1

引导程序5.1.0

最近对 text 和 bg 类创建方式的更改需要在 5.1.0 中进行额外的 SASS 映射合并

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$custom-theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

@import "bootstrap";

引导程序5.0.2

如果您希望它生成诸如、等类，则需要使用将“第三级”变量添加到主题颜色映射中...map-mergebg-tertiarybtn-tertiary

@import "functions";
@import "variables";
@import "mixins";

$tertiary: #3fb247;

$theme-colors:map-merge($theme-colors, (
  "tertiary": $tertiary
));
      
@import "bootstrap";

演示

Answer 2

从 Bootstrap 5.1.3 开始，背景颜色组件不会自动生成

$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

说明书上写着，

不幸的是，目前并不是每个组件都使用这个 Sass 映射。未来的更新将努力改进这一点。在那之前，计划使用 ${color} 变量和这个 Sass 映射。

这是在 Bootstrap 5.1.3 中手动添加类的一种方法。.bg-*使用Parcel V 2.3.2编译

/*Bootstrap core imports - adjust for your case*/
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/mixins";


$custom-theme-colors:(
  "custom-color": #8bd0da,
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

// Adjust path to bootstrap for your case
@import "~bootstrap/scss/bootstrap";

// .bg classes not automatically generated. As an example, manually add
// .bg-custom-color

.bg-custom-color{background-color: var(--bs-custom-color);};

示例 HTML

<div class="container border mb-4 bg-primary">
    Background: bg-primary
</div>

<div class="container border mb-4 bg-custom-color">
    <code>bg-custom-color</code>
</div>

<div class="container mb-4">    
    <div class="btn btn-custom-color"><code>btn-custom-color</code></div>
</div>

<div class="container mb-4">
    <div class="alert-custom-color">alert-custom-color</div>
</div>

<div class="container mb-4">
    <ul class="list-group">
        <li class="list-group-item-custom-color"><code>list-group-item-custom-color</code></li>
    </ul>
</div>

页面渲染如下图