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

Question

我无法通过修改引导程序的主题来更改验证边框颜色。 我的目标是将有效更改为粉红色，以便我可以看到更改，并且出于同样的原因将无效更改为蓝色。

这是我尝试使用的代码：

// 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";