不能对文本或BG使用主题颜色

2022-02-21 00:00:00 css sass bootstrap-5

我在SCSS文件中覆盖引导程序的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文档中对文本或BG使用相同的颜色,如下所示。

<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-starorangetext-starorange,但存在btn-starorangeborder-starorangelink-starorange


解决方案

我最近回答了similar question,但似乎确实有new issue introduced in 5.1.0,因为引导博客上提到了此更改.

已更新.BG-和.text-实用程序(&Q) 构建新的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";

Demo


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

相关文章