Html 引导程序4无法将新CSS应用于选项卡项

我已经有一段时间没有在一个网站上工作了，即使在那时，我也几乎不想改变我的sass文件来改变我的引导主题，所以我很生疏

我有一个新网站，将使用一些选项卡来显示不同的数据集，这些选项卡使用nav类。我还对sass主题进行了一些调整，用于实际的菜单导航。菜单导航使用蓝色背景和引导基色进行鼠标悬停。我希望我的标签上有不同的颜色，所以我希望对标签进行更改，但我无法使其正常工作

这是我的主题的sass设置。这就是当我将鼠标移到某个项目上时，导航的颜色会发生变化，我希望将其保留在主导航中

.nav-link {
    &:hover {
        background-color: $active-bg-color;
    }
}

这是我的标签的原始html

<ul class="nav nav-tabs card-header-tabs" id="tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#payslip" data-toggle="tab">Pay Slip</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#crewsheet" data-toggle="tab">Crew Pay/Activity Sheet</a>
    </li>
</ul>

为了更改我选项卡上的悬停事件，我创建了这个css并尝试了以下HTML。这不起作用，最终没有对选项卡应用任何CSS

.tab-link {
    &:hover {
        background-color: silver;
    }
}


<ul class="nav nav-tabs card-header-tabs" id="tabs">
    <li class="nav-item">
        <a class="tab-link active" href="#payslip" data-toggle="tab">Pay Slip</a>
    </li>
    <li class="nav-item">
        <a class="tab-link" href="#crewsheet" data-toggle="tab">Crew Pay/Activity Sheet</a>
    </li>
</ul>

.tab链接{
&：悬停{
背景颜色：银色；
}
}

下面是选项卡的屏幕截图，以便更好地了解我正在查看的内容。