Bootstrap 5 如何自定义 SASS 变量 Bootstrap 源码定制优缺点-Bootstrap教程-PHP中文网

最稳妥的定制起点是直接修改 _variables.scss；需在导入 Bootstrap 前用自定义变量覆盖，默认值由 Sass 变量驱动，推荐使用 @use 语法并按需导入组件以控制体积与维护性。

bootstrap 5 如何自定义 sass 变量 bootstrap 源码定制优缺点

直接改 `_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），但变量作用域更干净。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

@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/ 校验兼容性