Bootstrap 4.6.0修改form-validation-states无法更改验证边框颜色问题

核心问题说明 #

仅修改$form-validation-states仅能控制验证提示文本、图标颜色，表单控件的验证状态边框颜色由独立的SCSS变量控制，需要同步覆写才能生效。

正确配置代码 #

// 第一步：导入Bootstrap核心基础依赖
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

// 第二步：覆写验证相关所有变量
$valid-color: pink;
$invalid-color: blue;
// 原生表单控件边框色
$input-border-color-valid: $valid-color;
$input-border-color-invalid: $invalid-color;
// 自定义表单控件边框色
$custom-select-border-color-valid: $valid-color;
$custom-select-border-color-invalid: $invalid-color;
$form-check-input-border-color-valid: $valid-color;
$form-check-input-border-color-invalid: $invalid-color;

// 第三步：更新验证状态映射表，同步提示文本、图标颜色
$form-validation-states: map-merge(
    (
        "valid": (
            "color": $valid-color,
            "icon": $form-feedback-icon-valid
        ),
        "invalid": (
            "color": $invalid-color,
            "icon": $form-feedback-icon-invalid
        )
    ),
    $form-validation-states
);

// 第四步：导入所有Bootstrap业务组件
@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";
@import "../../../node_modules/bootstrap/scss/forms";
// 其余Bootstrap组件导入
...

生效要求 #

• 所有变量覆写操作必须放在bootstrap/scss/forms组件导入之前完成，导入后修改变量无法生效
• 无需将变量放在必填基础依赖导入之前，Bootstrap默认变量带!default标记，在variables导入后覆写即可覆盖默认值
• 如果项目中使用了自定义表单类（带.custom-前缀），必须覆写对应$custom-*开头的验证边框变量，避免样式不一致

内容的提问来源于stack exchange，提问作者Timber