如何为BootstrapVue进度条制作自定义变体？

Question

我想为BootstrapVue进度条创建自定义变体。

我看了here：

  

创建自定义变体时，请遵循Bootstrap V4 varian CSS   类命名方案，它们将成为各种可用的   使用该方案的组件（即创建自定义CSS类   btn-purple和purple成为一个可以使用的vailid变种。

是的，这不起作用：

HTML

<b-progress-bar :value="counter*(1.5/10)" variant="purple"></b-progress-bar>

CSS

.b-progress-purple {
      background-color: purple !important;
      color: red !important;
}

正如我们在这里看到的那样：http://jsfiddle.net/edwardtanguay/m8gor3no

如何为BootstrapVue进度条创建自定义变体？