必须在@import "bootstrap/scss/variables"前重定义表单sass变量才生效；可改的包括$form-control-border-color、$form-control-bg、$form-feedback-valid-color等，但需确保导入_forms/validation且输出自定义编译css。
Bootstrap 5 表单的 Sass 变量定制必须在 @import "bootstrap/scss/variables" 之前完成，否则所有修改（如 $form-control-border-color、$form-feedback-valid-color）都无效——Sass 变量只认首次声明。
哪些表单变量能改？改了真生效吗？
以下变量可安全覆盖并直接影响表单样式：
-
$form-control-border-color：控制 input 边框默认色（含 focus 状态的$form-control-border-color-focus） -
$form-control-bg和$form-control-bg-disabled：背景色，注意 disabled 状态需单独设 -
$form-feedback-valid-color/$form-feedback-invalid-color：✅/❌ 提示文字颜色 -
$form-check-input-checked-bg：复选框/单选按钮选中填充色 -
$form-select-bg：下拉框背景，但$form-select-indicator需额外处理 SVG 路径
⚠️ 这些变量改了也白改：
- 写在
@import "bootstrap/scss/bootstrap"之后 → 编译器已用旧值生成 CSS - 试图用 CSS 变量（
--bs-form-control-border-color）覆盖.form-control的 border → 它只影响直接读取该变量的属性，不改变border-color: var(--bs-form-control-border-color)以外的衍生逻辑（比如 focus-shadow 的计算） - 修改
$form-control-font-size却没同步调$input-height→ input 高度可能错位
为什么改了 $form-feedback-invalid-color，.invalid-feedback 文字还是红色？
常见原因不是变量没生效，而是你漏掉了 @import "bootstrap/scss/forms/_validation" 或它被跳过。Bootstrap 5 的验证样式不在主 bootstrap.scss 入口里硬编码，而是按需导入。
- 确保你的自定义入口文件（如
custom.scss）显式导入了forms/_validation - 如果只导入了
bootstrap/scss/bootstrap，它内部确实会加载_validation，但前提是你的变量已在variables加载前就位 - 检查 DevTools 中
.invalid-feedback的 computed color 是否来自bootstrap.css的原始规则 → 如果是，说明变量未参与编译
如何安全新增一个表单状态类（比如 .form-control-warning）？
不能靠覆盖现有变量实现，得走 utility + mixin 扩展路径：
- 先定义新状态变量：
$form-control-warning-border-color: #f59e0b; - 用
map-merge()注入$theme-colors（仅当你要复用.border-warning逻辑） - 更直接的做法：在自定义 SCSS 文件末尾手动写类（确保在所有 Bootstrap 导入之后）：
.form-control-warning { border-color: $form-control-warning-border-color !important; } .form-control-warning:focus { box-shadow: 0 0 0 0.25rem rgba($form-control-warning-border-color, 0.25); } - ⚠️ 别加
!important在变量声明里（如$form-control-border-color: #f59e0b !important）→ Sass 不允许，编译报错
最易被忽略的一点：表单变量的生效依赖整个 Sass 构建链路。哪怕你把 $form-control-bg 改对了，如果构建脚本最终输出的是 dist/css/bootstrap.min.css（而非你编译的 custom.css），那页面加载的仍是原始样式。
