怎么定制Bootstrap的Sass变量-Bootstrap教程-PHP中文网

变量必须在@import "bootstrap/scss/functions"之前声明，否则因!default机制失效；正确顺序为：先声明$primary等变量，再依次导入functions、variables及后续模块，并同步更新$theme-colors、$primary-rgb等衍生变量。

怎么定制bootstrap的sass变量

变量必须在 `@import "bootstrap/scss/functions"` 之前声明

Bootstrap 的 Sass 变量（如 $primary、$grid-columns）带 !default，只在首次定义时生效。一旦 _functions.scss 或 _variables.scss 被加载，后续赋值就完全无效。

常见错误是把变量写在 @import "bootstrap/scss/bootstrap" 后面，或者写在 CSS 文件里——浏览器根本不会解析 $primary: red; 这种语句。

正确顺序：先声明变量 → @import "bootstrap/scss/functions" → @import "bootstrap/scss/variables" → 其余模块
推荐建一个干净的入口文件（比如 custom.scss），只放变量和 @import，不混业务样式
变量名严格大小写敏感：$Primary、$primary-color 都不会被识别，Sass 静默回退到默认值

`$theme-colors` 和单个变量要同步更新

$primary 是基础值，但 .text-primary、.bg-success 等工具类实际读取的是 $theme-colors 这个 map。默认它包含 ("primary": $primary)，但如果你重写了整个 $theme-colors，就必须显式保留所有键，否则 secondary、danger 全部消失。

只改 $primary：够用，前提是没动过 $theme-colors（它会自动引用新值）
想加新色（如 navy）：$navy: #0f766e; + $theme-colors: map-merge($theme-colors, ("navy": $navy));
直接赋值 $theme-colors: ("primary": #2563eb, "navy": #0f766e); → 丢掉所有默认色，.btn-secondary 将失效
新增颜色后，必须调用 @include theme-colors();，否则不会生成 .text-navy 等类

衍生变量别漏：尤其是 `$primary-rgb` 和深色模式相关值

Bootstrap 很多地方不是直接用 $primary，而是用 $primary-rgb（用于 rgba()）、$primary-text-emphasis（深色背景上的文字对比度）、$primary-hover（按钮悬停色）等。这些不会自动生成，必须手动同步。

VPS Bootstrap

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

下载

$primary-rgb: to-rgb($primary); —— 必须写，否则 .alert-primary 的边框色可能错乱
$primary-text-emphasis: color-contrast($primary); —— 影响深色模式下 .text-primary 的可读性
按钮 hover 色不对？优先查 $primary-hover，而不是硬写 .btn-primary:hover { background: ... }
Bootstrap 5.3+ 新增了 $primary-bg-subtle 等变量，旧写法可能被忽略

编译没生效？先盯住这三件事

“改了但还是蓝色”几乎都卡在这几个环节：

项目实际加载的是 bootstrap.min.css（CDN 或 dist/css 下），根本没走 Sass 编译流程 → 检查 HTML 中 <link> 是否指向你构建出的 CSS，且构建入口是你自己的 custom.scss
Webpack/Vite 配置了 additionalData 或 prependData 自动注入变量 → 它可能把你手写的 $primary 覆盖或冲突了
用了 Node Sass → 已废弃，不支持 Bootstrap 5.3+ 的新函数；运行 npx sass --version 确保是 Dart Sass（2026 年起强制要求）