bootstrap-4 - 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";