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

fnvucqvd  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(1)|浏览(130)

在WordPress中使用Bootstrap主题名为BScore和css由scss编译,我有一个文件名为:
_bscore_variables.scss,它允许我覆盖bootstrap主题变量。
例如,我设置颜色变量:

$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;

然后我可以在同一个文件中覆盖主要的次要的etc变量,像这样:

$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

1cklez4t

1cklez4t1#

这是有可能的。
您必须覆盖$headings-color而不是$heading-color
祝你好运!

相关问题