相关疑难解决方法(0)

我刚刚使用 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 变量似乎已在 …

我在向引导程序的颜色图添加颜色时遇到问题。

这是我当前的导入文件：

// Required bootstrap components
@import "../../../node_modules/bootstrap/scss/functions";

$custom-colors: (
    "custom-primary": #003767,
    "custom-secondary": #007f2e,
    "custom-success": #C00000,
    "custom-info": #FF5000,
    "custom-warning": #414A51,
    "custom-danger": #E3E3E3,
    "custom-light": #F0F0F0,
    "custom-dark": #00B2CE,
);

@import "../../../node_modules/bootstrap/scss/variables";
// `$theme-colors` is one of the variable that's declared in variables.scss
// therefore this line of code has to be placed after the variables import
$theme-colors: map-merge($theme-colors, $custom-colors);
// but in order for this to take effect it needs to be before the variables import

// Custom bootstrap
// This file …