最稳妥的定制起点是直接修改 _variables.scss；需在导入 Bootstrap 前用自定义变量覆盖，默认值由 Sass 变量驱动，推荐使用 @use 语法并按需导入组件以控制体积与维护性。
直接改 _variables.scss 是最稳妥的定制起点
Bootstrap 5 的所有默认样式都由 Sass 变量驱动，核心变量集中在 node_modules/bootstrap/scss/_variables.scss。你不需要覆盖 CSS，而是提前在引入 Bootstrap 主文件前，用自定义变量文件覆盖原始值。
典型做法是新建一个 custom.scss：
// custom.scss // 1. 先定义你的变量（必须在 @import bootstrap 之前） $primary: #6f42c1; $font-size-base: 1rem; $border-radius: 8px; // 2. 再导入 Bootstrap 的依赖链 @import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; // ...按需导入其余模块
这样做的关键在于顺序：变量必须在 @import "bootstrap/scss/variables" 之前声明，否则会被默认值覆盖。
- 不推荐直接修改
node_modules下的源文件——下次npm install就会丢失 - 不要跳过
functions和mixins导入——很多变量依赖它们计算（比如$enable-rounded影响border-radius衍生值） - 如果用 Webpack/Vite，确保 Sass 加载器已启用
additionalData或通过@use方式注入，避免路径解析失败
用 @use + with 替代 @import 更安全（Bootstrap 5.3+）
Bootstrap 5.3 起官方推荐使用模块化 @use 语法，它能避免全局命名污染，并支持显式变量传入。如果你的构建工具支持 Dart Sass ≥ 1.33，优先采用：
// modern.scss @use "bootstrap" with ( $primary: #6f42c1, $body-font-size: 1.05rem, $enable-shadows: true );
注意：@use 不会自动导入全部组件，你仍需手动 @include 所需模块（如 bootstrap/components），但变量作用域更干净。
-
@import是全局合并，容易因重复导入导致变量被意外重写 -
@use中未声明的变量仍走 Bootstrap 默认值，不会报错，但可能遗漏预期效果（比如没设$enable-gradients就无法启用渐变背景类） - Vite 用户需确认
sass插件配置了style选项支持@use，否则编译报错"File to import not found"
覆盖变量 ≠ 覆盖所有表现，有些样式需额外处理
改 $primary 确实会让 .btn-primary、.alert-primary 变色，但以下情况不会自动生效：
- 硬编码颜色值的 CSS 规则（如某些工具提示
tooltip的箭头边框）——需单独重写.tooltip-inner或查源码定位对应变量 - 依赖多个变量组合的派生值（如
$primary-rgb是从$primary自动生成的，但$primary-text-emphasis需手动设置，否则文字对比度可能不达标） - 伪类状态（
:hover、:active）的颜色通常由 mixin 计算，若你禁用了$enable-transitions或改了$emphasis-color，行为可能偏离预期
建议打开 node_modules/bootstrap/scss/_variables.scss 搜索关键词，确认目标变量是否被实际用于生成目标样式——别只看名字匹配。
源码定制的体积与维护代价常被低估
全量导入 bootstrap/scss/bootstrap.scss 后再覆盖变量，最终 CSS 体积和原始 Bootstrap 几乎一致。真正减负靠的是「按需导入」：
- 删掉不用的组件导入（比如项目不用
carousel或toast，就跳过@import "bootstrap/scss/carousel"） - 关闭非必要功能开关：设
$enable-negative-margins: false、$enable-validation-icons: false可减少生成的选择器数量 - 升级时风险点：Bootstrap 大版本更新可能重命名变量（如
$gray-dark→$gray-900），CI 流程中应加入grep -r "variable-name" node_modules/bootstrap/scss/校验兼容性
最易被忽略的是：Sass 变量定制无法改变 HTML 结构或 JS 行为。想改下拉菜单的展开动画逻辑？还得动 Dropdown 的 JavaScript 源码或用事件钩子干预——变量只管“长什么样”，不管“怎么动”。
