Bootstrap 4.6.0 form-validation-states 不改变验证边框的颜色

Question

我无法通过修改 bootstrap 的主题来更改验证边框颜色。我的目标是将 valid 更改为粉红色，这样我就可以看到更改，并将 invalid 更改为蓝色。

这是我尝试使用的代码：

// Required
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

$form-validation-states: map-merge(
    (
        "valid": (
            "color": pink,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": blue,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

// Optional
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/code";
.
.
.

我也试过将 $form-validation-states 放在不同的位置，例如可选之前、可选之后和必需之前。

来源： https://getbootstrap.com/docs/4.6/components/forms/#customizing

Answer 1

我认为这是正确的地方 Bootstrap variable override:

// Required
@import "../../../node_modules/bootstrap/scss/functions";

$form-validation-states: map-merge(
    (
        "valid": (
            "color": pink,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": blue,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

// Optional
@import "../../../node_modules/bootstrap/scss/root";
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/images";
@import "../../../node_modules/bootstrap/scss/code";

Bootstrap 4.6.0 form-validation-states 不改变验证边框的颜色

Bootstrap 4.6.0 form-validation-states doesn't change the color of the validation border

sass

bootstrap-4