无法使用 Bootstrap 4.5.0 设置 $form-feedback-invalid-color答案

【问题标题】：Cannot set $form-feedback-invalid-color with Bootstrap 4.5.0无法使用 Bootstrap 4.5.0 设置 $form-feedback-invalid-color
【发布时间】：2021-07-06 15:54:20
【问题描述】：

我有以下全局scss：

/* Importing Bootstrap SCSS file. */

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

...

$danger: darken($red, 15%);

$theme-colors: (
  "danger": $danger
);

...

$form-feedback-invalid-color: $danger;

...

我有以下<form>

<form
  ngNoForm
  name="loginForm"
  action="/account/login"
  method="post"
  novalidate
>
  <div class="form-group">
    <label for="username">Email Address:</label>
    <input
      type="email"
      class="form-control form-control-sm"
      [class.is-invalid]="email.invalid && email.dirty"
      id="username"
      name="username"
      [(ngModel)]="username"
      tabindex="1"
      email
      required
      placeholder="Email Address"
      #usernameInput
      #email="ngModel"
    />
    <small class="help-block text-danger" *ngIf="email.invalid && email.dirty">
      A valid email address is required.
    </small>
  </div>
  ...
</form>

呈现如下：

最初，$danger 是 $red，即 #dc3545。如您所见，用户名的输入在无效时采用#dc3545的边框颜色：

但是带有text-danger 类的文本是#a71d2a 的正确颜色。

设置无效输入的边框颜色时我在做什么？

【问题讨论】：

标签： css bootstrap-4 sass

【解决方案1】：

发生了什么事：

Bootstrap 的_variables.scss 是这样的：

// Form validation

...

$form-feedback-invalid-color:       theme-color("danger") !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;

...

$form-validation-states: () !default;
$form-validation-states: map-merge(
  (

    ...

    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);

所以要覆盖$form-feedback-invalid-color，我还需要覆盖$form-validation-states，因为那是Bootstrap 读取它的地方。 Reference.

【讨论】：