修改$border-radius Sass变量后未生效，首要原因是未重新编译CSS；必须确保在@import Bootstrap主文件前重定义变量，并使用sass构建流程导入bootstrap/scss/bootstrap.scss而非预编译CSS。
修改 $border-radius Sass 变量后未生效？先确认是否重编译
bootstrap 5+ 的圆角由 sass 变量 $border-radius 控制，默认值是 0.375rem（即 6px）。但改完变量不生效，90% 是因为没重新编译 css——你改的是源码里的 _variables.scss，不是已打包好的 bootstrap.min.css。
- 如果你用的是 npm + Sass 构建（如 Webpack/Vite），必须确保导入的是
bootstrap/scss/bootstrap.scss，而不是直接引入 CDN 或预编译的 CSS 文件 - 修改变量要放在导入 Bootstrap 主文件之前，顺序错误会导致覆盖失败
- Vite 用户注意：默认不处理
@import链式 Sass，需安装sass和sass-embedded（或使用sass包）
想只改按钮、不牵连其他组件？用 $border-radius-sm 和 $border-radius-lg
Bootstrap 按钮类（.btn）实际用的是 $border-radius，但它的尺寸变体（.btn-sm / .btn-lg）分别依赖 $border-radius-sm 和 $border-radius-lg。若只想调按钮，别动全局 $border-radius，否则 .form-control、.card 全跟着变。
- 推荐做法：在自定义 Sass 文件中重定义这三个变量，再
@import "bootstrap/scss/functions"→@import "bootstrap/scss/variables"→ 覆盖变量 →@import "bootstrap/scss/bootstrap" - 例如：
$border-radius: 0.25rem; $border-radius-sm: 0.125rem; $border-radius-lg: 0.5rem; - 注意：Bootstrap 4 中
$border-radius是唯一主变量，5+ 才拆出-sm/-lg，版本混淆会导致无效
纯 CSS 覆盖方案：为什么 !important 不可靠
如果项目没法用 Sass，只能靠 CSS 覆盖，别直接写 .btn { border-radius: 4px !important; }。Bootstrap 5 的按钮样式优先级很高，且 .btn-sm 和 .btn-lg 有独立规则，!important 容易漏覆盖，还破坏可维护性。
- 更稳妥的方式是利用 Bootstrap 的 CSS 自定义属性（CSS vars）：它把圆角映射到了
--bs-border-radius，所以可全局覆盖：:root { --bs-border-radius: 0.25rem; } - 但注意：该变量仅影响使用了
var(--bs-border-radius)的组件（Bootstrap 5.3+ 默认启用），旧版不支持 - 局部覆盖按钮：用属性选择器精准命中，比如
.btn:not(.btn-sm):not(.btn-lg) { border-radius: 0.25rem; }，避免干扰尺寸变体
PostCSS 或 Tailwind 用户：别混用 border-radius 工具类
如果项目同时用了 Tailwind 或 PostCSS 插件（如 postcss-preset-env），它们可能注入自己的 border-radius 类（如 rounded-md），和 Bootstrap 的 .btn 冲突。浏览器按 CSS 加载顺序应用样式，后加载的会覆盖前者。
- 检查 DevTools 的 Computed 样式，看最终生效的
border-radius来自哪个来源 - Tailwind 默认的
rounded是0.25rem，比 Bootstrap 的0.375rem小，若两者共存且顺序不对，按钮会意外变小 - 解决方案：要么统一用 CSS 变量控制（双方都支持），要么在构建时禁用其中一方的圆角工具类生成
改按钮圆角看着简单，真正卡住人的往往是构建链路断点、变量作用域错位、或多个 UI 框架暗中打架——尤其是 border-radius 这种被高频复用的基础值，动一处容易震一片。
