Bootstrap 5 - 自定义主题颜色不更新类 [英] Bootstrap 5 - Custom theme-colors not updating classes

问题描述

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

I have just started a new project using Bootstrap 5 and I am trying to set up theme-colors with some custom values. However doing it the way that I have always done it is giving me some issues.

我创建了三种颜色:$primary、$secondary、$tertiary.但是，如果我添加任何类，例如 bg-tertiary，则没有任何变化，就好像它不存在一样.bg-primary 只是使用 Bootstrap 定义的默认颜色.

I have created three colors: $primary, $secondary, $tertiary. However if I add any classes such as bg-tertiary, then nothing changes as if it doesn't exist. bg-primary simply uses the default color defined by 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，那么使用 $dark 的 scss 文件中的任何代码都会更改为使用 $tertiary 中的值.如下图:

If I change a default value such as "dark" to use $tertiary then any code within the scss file using $dark changes to use the value from $tertiary. Like below:

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

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

我做错了什么?我不明白为什么 scss 文件中的变量会受到 $theme-colors 更改的影响，而类却没有.

What am I doing wrong? I can't understand why the variables in the scss file are being affected by the change to $theme-colors, but classes are not.

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

Using chrome inspector I can see that .bg-primary uses a css variable --bs-primary-rgb. Looking at the available variables --bs-primary has changed to the color that I have set, but not --bs-primary-rgb.

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

How can I have this variable be changed. Should it be done automatically?

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

With further research these rgb variables appear to have been introduced in Bootstrap 5.1. I can't find much information about how to get the variable to update to my set values probably because it is too new. So I have chosen to revert back to 5.0.2 and everything is now working as I expect it to.

推荐答案

Bootstrap 5.1.0

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

A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0

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

$tertiary: #3fb247;

$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

您需要添加一个三级"如果您希望它生成诸如 bg-tertiary、btn-tertiary 等类，请使用 map-merge 将 var 转换为主题颜色映射...

You need to add a "tertiary" var to the theme-colors map using map-merge if you want it to generate classes like bg-tertiary, btn-tertiary, etc...

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

$tertiary: #3fb247;

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

演示

这篇关于Bootstrap 5 - 自定义主题颜色不更新类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！