如何使用SASS自定义Bootstrap 5.3中的警报组件？

Question

我对 $primary 和 $ secondary 变量进行了更改。这改变了我测试的所有组件，如按钮、卡片、导航栏。但它不会改变警报的颜色。这是我的 custom.sass 文件：

$purple-dark:  #9926f0;
$purple-light:  #BB6EF5;
$pink:    #d122e3;
 
$primary:       $purple-dark;
$secondary:     $pink;
 
@import "../node_modules/bootstrap/scss/bootstrap.scss";

在有关警报的文档中有一个警告框，但没有解释如何解决它。或者我无法理解！

“注意！从 v5.3 开始，Sass mixin 已被弃用。警报变体现在在 Sass 循环中覆盖其 CSS 变量。alert-variant()”

https://getbootstrap.com/docs/5.3/components/alerts/

Answer 1

根据Sass循环生成这样的类：

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}
.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}
... and so on

确保您的警报根据您的新

$primary

获得这些类别的颜色之一。例如。

--bs-primary-text-emphasis

定义为：

$primary-text-emphasis:   shade-color($primary, 60%) !default;