引导程序4 SASS表主类未拾取更改的主颜色？_Sass_Bootstrap 4

引导程序4 SASS表主类未拾取更改的主颜色？

sass bootstrap-4

引导程序4 SASS表主类未拾取更改的主颜色？,sass,bootstrap-4,Sass,Bootstrap 4,我还在学习BS4和SASS，但我不明白为什么我的原色设置没有被选中我创建了一个客户变量文件，并设置了我想要的$blue的颜色。这是我的\u custom-variables.scss文件中的全部内容 $blue: #0078D2; $light: #F7F7F7; 然后在我的site.scss文件中导入它 @import "scss/_custom-variables.scss"; @import "bootstrap/bootstrap.scss"; @import "scss/_my-t

我还在学习BS4和SASS，但我不明白为什么我的原色设置没有被选中

我创建了一个客户变量文件，并设置了我想要的

$blue

的颜色。这是我的

\u custom-variables.scss

文件中的全部内容

$blue: #0078D2;
$light: #F7F7F7;

然后在我的site.scss文件中导入它

@import "scss/_custom-variables.scss";
@import "bootstrap/bootstrap.scss";
@import "scss/_my-theme.scss";

当我查看编译后的CSS文件时，我可以看到$blue被设置为正确的值

:root {
  --blue: #0078D2;
  --indigo: #6610f2;
  --purple: #6f42c1;

然而，当我使用下面的表格标题时，它显示了默认的BS4蓝色，它比我想要设置的蓝色要轻得多。这里是CSS的一个片段，您可以看到蓝色的设置是正确的

<table class="table table-striped table-bordered">
<thead>
    <tr class="table-primary">
        <th>File Name</th>
        <th>File Date</th>
        <th>Action</th>
    </tr>
</thead>

表着色类默认情况下使颜色变浅

如果您不希望发生这种情况，请将

表主

替换为bg主

资料来源：

表格着色类别默认情况下使颜色变浅

如果您不希望发生这种情况，请将

表主

替换为bg主

资料来源：

是的，由于Bootstrap 4 sass第80行中的强大功能，这也会发生在警报主项的背景中，列出组项主项，该功能会根据您的颜色动态创建较浅或较深的颜色。在您的情况下，类表primary是在中生成的第95行：

@each $color, $value in $theme-colors {
    @include table-row-variant($color, theme-color-level($color, -9));
}

第3行中的mixin将采用较深或较浅的新颜色，并将其设置为.table primary、.table primary>th或.table primary>td元素的背景色

此功能的主要优点是生成动态背景色，以便为您的警报、表格和列表组项生成动态背景色。尝试将

$blue

或

$primary

更新为

\598234

或在自定义

scss/\u自定义变量.scss

文件中添加新的主题颜色，如下所示

$theme-colors: ("javatmp": #598234);

您将从文章中获得如下内容：

下面的文章提供了一些关于主题颜色级别的信息：

是的，由于Bootstrap 4 sass第80行中的强大功能，这也会发生在警报主项、列表组项主项的背景上，该功能会根据您的颜色动态创建较浅或较深的颜色。在您的情况下，类表primary是在中生成的第95行：

@each $color, $value in $theme-colors {
    @include table-row-variant($color, theme-color-level($color, -9));
}