如何覆盖 Bootstrap 变量 --bs-heading-color

Question

在名为

BScore

的 WordPress 中使用 Bootstrap 主题和由 scss 编译的 css 我有一个名为：

_bscore_variables.scss

，它允许我覆盖引导主题变量。

例如，我设置颜色变量：

$gray-100:                        #f8f9fa;
$gray-200:                        #e9ecef;
$gray-300:                        #dee2e6;
$gray-400:                        #ced4da;
$gray-500:                        #adb5bd;
$gray-600:                        #6c757d;
$gray-700:                        #495057;
$gray-800:                        #343a40;
$gray-900:                        #212529;
$black:                           #000;

然后我可以在同一个文件中像这样覆盖主要次要等变量：

$primary:                         $red;
$secondary:                       $gray-600;
$success:                         $green;

但是，我正在使用的主题标题从名为

--bs-heading-color

的变量中获取颜色，当我尝试在文件中添加覆盖时

$heading-color: $grey-800

我收到一条错误消息，指出编译 scss 时出现问题

如果我将该行更改为：

$heading-color: grey

我没有收到任何编译错误，但我没有看到颜色在浏览器中生效。 如果我检查该元素，我会看到该元素的原始颜色设置为

h2 { color: var(--bs-heading-color);}

任何人都可以建议如何覆盖这个变量吗？

有关引导颜色的文档没有提及该特定变量或其来源。

https://getbootstrap.com/docs/5.3/utilities/colors/#sass-variables

Answer 1

这是可能的。

您必须覆盖

$headings-color

而不是

$heading-color

。

祝你好运！

Answer 2

查看文档的自定义部分：https://getbootstrap.com/docs/5.3/customize/css-variables/

它告诉您引导程序中的变量如何工作。

对于以 -- 开头的根变量（例如 --bs-heading-color），它们是在 _root.scss 文件中定义的，因此您需要检查此文件以了解它们是如何定义的。

在这个文件中你可以看到

--#{$prefix}heading-color: #{$headings-color};

这就是为什么你需要更改 $headings-color

希望这有帮助！