如何在 Bootstrap 4 中覆盖 .alert-[style]？答案

【问题标题】：How to override .alert-[style] in Bootstrap 4?如何在 Bootstrap 4 中覆盖 .alert-[style]？
【发布时间】：2019-05-09 08:17:54
【问题描述】：

我刚开始使用 Bootstrap 4 和 Sass。我一生都无法弄清楚如何覆盖默认的 .alert-[whatever] 样式。

如果我有：

<div class="alert alert-success">Hello!</div>

它使用 Bootstrap 4 附带的默认浅绿色阴影创建一个警报。我可以覆盖它的唯一方法是使用我自己的自定义 CSS 样式用于 .alert-success。我宁愿使用内置变量来覆盖它，就像我使用其他颜色一样，但我不知道这是否是一个选项？

在我的 .scss 文件中，我有：

$blue: #3498db;
$green: #37bf91;

$theme-colors: (
  "primary": $blue,
  "success": $green,
);

我认为.alert-success 只会使用我在 .scss 文件中指定的$green，但事实并非如此。

我尝试过$alert-success: $green;这也没有改变任何东西。

解决这个问题的正确方法是什么？

【问题讨论】：

标签： sass bootstrap-4

【解决方案1】：

这类似于：How to change the bootstrap primary color? 请确保在覆盖之后导入 Bootstrap，我会回答与警报相关的问题。

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   
$blue: #3498db;
$green: #37bf91;

$theme-colors: (
  primary: $blue,
  success: $green,
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

演示：https://www.codeply.com/go/NCfqvU3Upe

对于警报，背景颜色和文本颜色是使用主题颜色上的SASS darken 函数得出的。默认值为：

$alert-bg-level: -10 !default;
$alert-border-level: -9 !default;
$alert-color-level: 6 !default;

负数使原主题颜色变亮，正数使颜色变暗。因此，例如，如果您想让成功警报 bg 更接近实际的 $green 颜色，您需要调整警报变量：

$alert-bg-level:0; // this negates the darken function
$alert-border-level:1;
$alert-color-level:-10;

我更新了demo 来显示这个。

【讨论】：

回答得很好。