Bootstrap 4 活动导航按钮的颜色与信息按钮的颜色相同

默认情况下，活动导航药片具有

主
颜色。如何优雅地应用
info
颜色

<nav className="nav flex-column nav-pills">
  <a className="nav-link active" href="#">Dashboard</a>
  <a className="nav-link" href="#">Apps</a>
</nav>



这就是导航栏的外观


我希望活动药丸的颜色为
info
您可以像这样引用
info
CSS变量

.nav-pills .nav-link.active {
    background-color: var(--info);
}


或，使用SASS

@import "bootstrap/functions";
@import "bootstrap/variables";

$nav-pills-link-active-bg: theme-color("info");

@import "bootstrap";