Bootstrap 4 SASS表 - 主要课程没有改变原色？

Question

我还在学习BS4和SASS，但我不明白为什么设置原色并没有被提取。

我创建了一个客户变量文件，并设置了我想要的$blue颜色。这就是我在_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蓝色，它比想要设置的蓝色要轻得多。这是一个comipiled 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>

奇怪的是，我有一些我使用text-primary类的基本文本，它正在拾取我设置的$blue颜色。因此，table-primary必须有一些东西，但我没有看到它。我查看了我的Bootstrap文件夹中的_tables.scss，但我看不到任何看起来像是设置它的内容。当我搜索table-primary的整个解决方案时，我发现所有的都是编译后的CSS中的类而不是任何.scss文件中的类。编译后的CSS中的table-primary具有较浅的蓝色。

这是正确的蓝色。

<span class="text-primary">@ViewBag.FolderPath</span>

Answer 1

是的，这也会发生在alert-primary，list-group-item-primary的背景上，因为在theme-color-level的Bootstrap 4 sass第80行中找到了很棒的函数bootstrap/scss/_functions.scss，它会动态创建根据您的颜色更浅或更深的颜色。 在您的情况下，已生成类table-primary 第{95}行bootstrap/scss/_tables.scss：

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

table-row-variant在{3}}第3行找到了mixin，它将采用更暗或更浅的新颜色并将其设置为.table-primary，.table-primary＆gt;的背景颜色。 th，或.table-primary＆gt; td元素。

此功能的主要优点是为您的警报，表格和列表组项目生成动态背景颜色。尝试将$blue或$primary更新为#598234或在您的自定义scss/_custom-variables.scss文件中添加新的主题颜色

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

您将从文章bootstrap\scss\mixins_table-row.scss中获得类似的内容： Preparing Template for Bootstrap customization

以下文章提供了theme-color-level函数的少量信息：

Answer 2

表着色类默认使颜色更浅。

如果您不希望发生这种情况，请将table-primary替换为 bg-primary 。

来源：

• Docs
• Source code