如何覆盖引导程序 4 中的所有颜色？

Question

我花时间学习了如何使用 SASS 进行主题引导。步骤如下：

• 在我的项目目录中的命令行运行npm install bootstrap --save
• 然后我写到 main.scss 文件与

$theme-colors: (
  "primary": #9b2335,
  "secondary": #696969,
  "success": #d9596c,
  "info": #d02f47,
  "warning": #e38291,
  "danger":#de6e7e,
  "light": #d9d9d9,
  "dark": #333333
);

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

• 在命令行运行sass main.scss main.css

因此，我希望所有主题颜色都会被覆盖。请注意，我所有的自定义 $theme-color 变量都是红色或灰色系列中的色调。这些颜色值都不是蓝色的。但是，当聚焦时，我的导航栏切换按钮周围的边框是蓝色的（见图）。为什么它没有更改为我的自定义主题颜色之一？我确实查看了 _variables.scss，但没有明显的发现。

我的页面的 html 是从引导相册示例中复制的，但我认为重要的部分是：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

我在这里缺少什么 Sass 来覆盖所有颜色？

Answer 1

这是来自 ("_reboot.scss") 的默认引导焦点颜色：

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

如果你想从你的主题中设置一种颜色，你必须覆盖它。 f.e.：

button:focus {
  outline: 5px auto map-get($theme-colors, "primary");
}