在 angular 2 和 bootstrap 4 中实现带有自定义颜色的进度条

Question

我正在尝试使用 ng-bootstrap 组件实现 bootstrap 进度条。该文档使用指令 "type" 提供了 4 种着色类型，它只能是 4 种之一："success"、"info"、"warning" 或 "danger"。 (https://ng-bootstrap.github.io/#/components/progressbar)

我确保在我的变量 sass 文件夹中自定义所有颜色以覆盖 bootstrap 的默认变量。

然而，当使用原色时，条形显示为蓝色。

进度条码：

<ngb-progressbar type="primary" [value]="25"></ngb-progressbar>

CSS 试验：

//Doesn't work - no effect what so ever - this style is placed in a global stylesheet in order to have access to the progress bar.
.progress.progress-primary{
    background-color: yellow;
}

关于如何更改该颜色有什么建议吗？

Answer 1

Bootstrap 4 不根据预定义的变量改变进度条。 $progress-bar-color 变量是硬编码的，是造成问题的原因。

现已修复。

在 angular 2 和 bootstrap 4 中实现带有自定义颜色的进度条

Implementing progress bar with custom color in angular 2 and bootstrap 4

bootstrap-4

ng-bootstrap

angular