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

Question

我有以下全局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。如您所见，username的输入在无效时采用#dc3545的边框颜色：

​

​

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

​

​

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

Answer 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。