不能将主题颜色与文本或背景一起使用

Question

我在我的 scss 文件中覆盖 bootstrap theme-colors，如下所示

// set variables
$primary: #8dc3a7;
$light: #b4d6c1;
$starorange: #df711b;

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

$custom-theme-colors: (
  "starorange": $starorange,
);

// modify theme colors
$theme-colors: map-merge($theme-colors, $custom-theme-colors);

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

我可以在按钮中使用starorange颜色，如下所示，并且它正确应用了颜色

<button class="btn btn-md btn-starorange">Send</button>

但是，我无法在同一个 HTML 文档中为文本或背景使用相同的颜色，如下所示。

<div class="pb-1 text-starorange">
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
    <i class="bi bi-star-fill"></i>
</div>

或者

<section class="bg-starorange">
     .... some html here ...
</section>

因此，上述两个示例对输出都没有影响，我的意思是根本没有应用颜色。我不明白为什么会发生这种情况，任何帮助将不胜感激。

PS：转译后的css文件中没有bg-starorange, ，但是,或以某种方式存在。text-starorangebtn-starorangeborder-starorangelink-starorange

Answer 1

我最近回答了一个类似的问题，但由于 Bootstrap 博客上提到的这一更改， 5.1.0 中似乎确实引入了一个新问题......

更新了 .bg- 和 .text- 实用程序 我们新的 RGB 值旨在帮助我们在整个项目中更好地利用 CSS 变量。首先，我们的背景颜色和颜色实用程序已更新为使用这些新的 RGB 值实时定制，无需重新编译 Sass 以及任何背景或文本颜色的即时透明度。”

目前在 5.1.0 中，您需要像这样重建所有 bg-* 和 text-* 类......

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

$starorange: #df711b;

$custom-theme-colors: (
  "starorange": $starorange
);

$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";

演示

bg-Bootstrap 5.1.x 的更新 - 自定义和颜色问题text-将在 5.2.x 中修复：https: //github.com/twbs/bootstrap/issues/35297