Bootstrap 5 CSS 覆盖变量 — 更改默认 $green 值也会更改 btn-success 文本颜色？

Question

我正在像这样加载我的 Bootstrap 5 sass：

@import '_partials/bs_var_overrides';
@import 'node_modules/bootstrap/scss/bootstrap';

在 bs_var_overrides 中，我只是这样做：

$green: #00ff00;

这自然会改变 $primary: $green 的 bs var 默认值，这正是我想要的。

但是，在我的 btn-success 按钮中，它还会将文本颜色从白色更改为黑色，我正在尝试理解为什么 (?)

Answer 1

white to black 由于 shade-color 功能如：
@function shade-color($color, $percentage) {
@return 混合（黑色，$color，$percentage）；
}

有用的链接:
getbootstrap.com/docs/5.2/components/buttons/#variables
https://codepen.io/raeesh/pen/OJQmxrj
--------------------------
bs_var_overrides.scss 文件
$绿色：#00ff00；
$主要：$绿色；

Style.scss 文件
@import '_partials/bs_var_overrides';
@import 'node_modules/bootstrap/scss/bootstrap';

/* 如果你想要btn-success颜色应该是白色 */
.btn-success {
--bs-btn-color: 变量(--bs-white);
}