如何在Bootstrap 5中自定义Sass变量以重构默认CSS样式？-css教程-PHP中文网

必须在@import "bootstrap/scss/variables"前重定义$primary等变量，否则无效；正确顺序为先声明变量（推荐用!default），再依次导入functions、variables、bootstrap，并用map-merge增量扩展$theme-colors且显式调用@include theme-colors()。

如何在bootstrap 5中自定义sass变量以重构默认css样式？

必须在 @import "bootstrap/scss/variables" 之前重定义变量，否则所有修改都无效——Sass 变量只在首次声明时生效，后续赋值被静默忽略。

为什么改了 `$primary` 却没变色？

常见错误是把变量写在 Bootstrap 源文件导入之后。比如：

@import "bootstrap/scss/bootstrap";
$primary: #dc2626; // ❌ 完全无效，variables 已加载完毕

真正起作用的顺序必须是：

先声明变量（带 !default 更安全）
再依次 @import "bootstrap/scss/functions"、@import "bootstrap/scss/variables"、@import "bootstrap/scss/bootstrap"
确保你的构建入口是你自己的 custom.scss，而不是直接引用 bootstrap.min.css

漏掉 functions 会导致编译报错 Undefined variable: "$font-size-base"；顺序颠倒会让 $primary-rgb 等衍生变量仍用默认值。

如何安全新增一个主题色 `navy`？

不能直接写 $theme-colors: ("navy": #0f766e)，这会清空 primary、success 等所有内置键，导致 .btn-secondary 失效。

VPS Bootstrap

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

下载

正确做法是用 map-merge() 增量添加，并显式调用 @include theme-colors()：

$navy: #0f766e;
$theme-colors: map-merge($theme-colors, ("navy": $navy));
@include theme-colors();

注意：

"navy" 必须是字符串，navy（无引号）会编译失败
@include theme-colors() 必须放在所有 @import 之后，且已导入 bootstrap/scss/utilities 或至少 bootstrap/scss/utilities/api
DevTools 里查不到 .text-navy？大概率是 theme-colors() 没执行，或 utilities 根本没引入

哪些变量能改？哪些改了也白改？

$primary、$font-size-base、$border-radius 这类语义变量可安全覆盖；但以下情况改了也没用：

在 :root 里重写 --bs-primary：这只是编译时生成的“快照”，不影响 lighten($primary, 10%) 这类 Sass 函数产出的样式
试图用 JS 动态改 document.documentElement.style.setProperty('--bs-primary', 'red')：同样只影响直接读取该 CSS 变量的地方，大量组件样式早已固化
把变量塞进 node_modules/bootstrap/scss/_variables.scss：下次 yarn upgrade 就丢，且违反不可变依赖原则

真正生效的前提只有一个：你修改的是参与构建的 Sass 源码，且变量在 functions 和 variables 导入前完成声明。

最常被忽略的点是构建链路本身——如果你的项目实际加载的是 CDN 上的 bootstrap.min.css，那所有 Sass 变量操作都只是本地幻觉。