Как переопределить .alert- [style] в Bootstrap 4?

Question

Я только начинаю с Bootstrap 4 и Sass.Я не могу понять, как переопределить стандартные стили .alert- [что угодно].

Если у меня есть:

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

Это создает предупреждение с легким оттенком зеленого по умолчанию, которое поставляется с Bootstrap 4. Единственный способ, которым я могу переопределить его, - это мой собственный стиль CSSдля .alert-успеха.Я бы предпочел использовать встроенную переменную, чтобы переопределить ее, как я делаю с другими цветами, но я понятия не имею, если это опция?

В моем файле .scss у меня есть:

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

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

Я предполагал, что .alert-success будет просто использовать $green, который я указал в моем файле .scss, но, похоже, это не так.

Я пыталсясделайте $alert-success: $green;, что тоже ничего не меняет.

Как правильно это сделать?

Answer 1

Это похоже на: Как изменить основной цвет начальной загрузки? Убедитесь, что вы импортируете 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

---

Для предупреждений цвета bg и текста выводятся с использованием функции SASS darken нацвет темы.Значения по умолчанию:

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

Отрицательные числа осветляют исходный цвет темы, положительные числа затемняют цвет.Так, например, если вы хотите, чтобы оповещение об успехе bg было ближе к реальному зеленому цвету, вы должны настроить переменные оповещения:

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

Я обновил demo , чтобы показатьэтот.