怎样在Bootstrap 5中通过Sass源码定制CSS主题-css教程-PHP中文网

必须先声明$primary等变量再依次导入functions、variables和bootstrap，否则因!default机制失效；漏functions会报错，用CDN或dist CSS则变量修改完全无效。

怎样在bootstrap 5中通过sass源码定制css主题

改了$primary却没变色？大概率是顺序错了。Bootstrap 的 Sass 变量带 !default，只在首次声明时生效；一旦 bootstrap/scss/variables 被加载，后续赋值就静默失效。

错误写法示例：

@import "bootstrap/scss/variables";
$primary: #dc2626; // ❌ 无效

正确顺序必须是：

先声明你要覆盖的变量（如 $primary、$font-size-base），推荐加 !default 更安全
再依次 @import "bootstrap/scss/functions" → @import "bootstrap/scss/variables" → @import "bootstrap/scss/bootstrap"
漏掉 functions 会导致编译报错 Undefined variable: "$font-size-base"
构建入口必须是你自己的 custom.scss，不能直接引用 bootstrap.min.css

想加个 navy 色但 .text-navy 在 DevTools 里查不到？说明 theme-colors() 没执行，或 utilities 根本没引入。

错误做法：

$theme-colors: ("navy": #0f766e); // ❌ 清空所有内置色，.btn-secondary 失效

正确做法：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

用 map-merge() 增量扩展：$theme-colors: map-merge($theme-colors, ("navy": #0f766e));
键名必须是字符串："navy" ✅，navy ❌（Sass 编译失败）
@include theme-colors() 必须放在所有 @import 之后，且已导入 bootstrap/scss/utilities 或至少 bootstrap/scss/utilities/api
否则不会生成 .bg-navy、.border-navy 等工具类

$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 就丢
只改 $font-size-base 但 .h1 没变：因为 .h1 用的是绝对值 2.5rem，不是基于变量计算的