Vue.js 如何为BootstrapVue进度条创建自定义变量？

我想为BootstrapVue进度条创建一个自定义变量

我读到：

创建自定义变体时，请遵循引导V4 varian CSS 类命名方案，它们将可供各种 使用该方案的组件（即创建自定义CSS类 btn purple和purple将成为一种可在上使用的VALID变体）

是的，这不起作用：

HTML 如图所示：

---

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

如果检查元素，可以看到进度条

变量
应用于
bg-
CSS类。因此，为了创建自定义变量，CSS规则必须是
.bg purple
。如果您检查元素，您可以看到正在进行的条形图
变量
应用于
bg-
CSS类。因此，为了创建自定义变量，CSS规则必须是
.bg purple
。
<b-progress-bar :value="counter*(1.5/10)" variant="purple"></b-progress-bar>

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