Bootstrap 5 中如何正确覆盖 Sass 变量？

UI天朝提问于 2026-03-10 18:41:18 阅读 2

组件

我正在用 Bootstrap 5 的 Sass 源码自定义主题，但改了 $primary 变量后编译出来的 CSS 还是默认蓝色，根本没生效。我是在自己的 main.scss 里先导入变量再改的，是不是顺序搞错了？

我的写法大概是这样：

// main.scss
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

$primary: #ff0000;

@import "bootstrap/scss/bootstrap";

但结果还是没变，到底该怎么正确覆盖这些变量啊？

UI框架

我来解答赞 0 收藏

反馈

1 条解答

UX芯依 Lv1

你的问题就是顺序写反了。

Bootstrap 的变量文件里已经定义了 $primary 的默认值，你在导入 variables 之后才重新赋值 $primary，但 variables 里的默认值已经先入为主了，你后面的赋值根本没用上。

正确的做法是：先覆盖变量，再导入 variables。

// main.scss

@import "bootstrap/scss/functions";



// 在这里先覆盖变量

$primary: #ff0000;



// 然后再导入 variables，你的值就会覆盖默认值

@import "bootstrap/scss/variables";

@import "bootstrap/scss/mixins";



@import "bootstrap/scss/bootstrap";

记住这个原则：Bootstrap 的 Sass 变量覆盖必须放在 functions 之后、variables 之前。functions 提供了必要的函数支持，variables 读取变量定义，而你需要在 variables 读取之前把自己的值塞进去。

另外提醒一下，如果你用的是 Bootstrap 5.3+，还可以用 CSS 变量的方式来覆盖，不用改 Sass：

:root {

  --bs-primary: #ff0000;

}

这种更简单，适合不复杂的场景。

2026-03-10 20:10