Bootstrap 4 theme-color("primary") 函数返回引导默认原色而不是覆盖原色

Question

在custom.scss中，修改theme-colors map

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

$theme-colors: ( 
    "primary": #3275B3, 
    "secondary": #004f93
);

在 main.scss 中，覆盖在引导之前导入

@import "./custom.scss"; //import bootstrap overrides
@import "~bootstrap/scss/bootstrap"; //import bootstrap

我有一个带有 .bg-primary 和按钮 .btn-primary 的导航栏可以正确呈现，但似乎使用 bootstraps theme-colors() 函数设置的引导属性设置不正确。他们仍然使用引导程序默认的原色，而不是我覆盖的原色。

bootstrap 的 _variables.scss 文件中的示例：

$component-active-bg: theme-color("primary") !default;

尝试在我的 custom.scss 中设置 $component-active-bg 也没有成功...

如何正确覆盖 bootstrap 4 的原色？

Answer 1

代替

$theme-colors: ( 
    "primary": #3275B3, 
    "secondary": #004f93
);

试试

$primary:       #3275B3;
$secondary:     #004f93;

虽然两个版本都适合我。

编辑：

找到它不起作用的原因。 在您的 custom.scss 中，您正在使用 @import "node_modules/bootstrap/scss/bootstrap";

导入引导程序

然后你自定义主题颜色

然后在您的 main.scss 中导入 custom.scss，然后再次导入引导程序。从而使用引导程序中的默认值再次覆盖 $theme-colors。