不能对文本或BG使用主题颜色
我在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-starorange
、text-starorange
,但存在btn-starorange
、border-starorange
或link-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
相关文章