编辑：

Question

在custom.scss中，修改主题颜色映射

@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属性没有正确设置。他们仍然使用bootstraps默认的原色，而不是我重写的原色。

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

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

尝试在我的custom.scss中设置$ component-active-bg并且没有...

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

Answer 1

而不是

import distro
distro.linux_distribution()

尝试

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

虽然这两个版本对我来说都很好。

找到它不起作用的原因。在您的 custom.scss 中，您将使用$primary: #3275B3; $secondary: #004f93;

导入引导程序

然后你自定义主题颜色

在 main.scss 中导入 custom.scss ，然后再次导入bootstrap。然后使用bootstrap中的默认值再次覆盖$ theme-colors。