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

Question

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

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

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

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

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

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

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然后再次导入bootstrap。从而使用 bootstrap 的默认值再次覆盖 $theme-colors。

Answer 2

{ “版本”：“0.2.0”， “配置”：[ { "name": "调试 CRA 测试", “类型”：“节点”， “请求”：“发射”， "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", “args”：[“测试”，“--runInBand”，“--无缓存”，“--watchAll=false”]， "cwd": "${workspaceRoot}", “协议”：“检查员”， “控制台”：“集成终端”， "internalConsoleOptions": "neverOpen", “环境”：{“CI”：“真”}， “disableOptimisticBPs”：真 } ] }