我尝试在Bootstrap中创建一个自定义按钮类，其颜色为虹膜紫色。
我使用Sass生成了上述按钮变体：

@import "../node_modules/bootstrap/scss/bootstrap";

$mynewcolor:#5D3FD3;

.btn-purple {
  @include button-variant($mynewcolor, shade-color($mynewcolor, 7.5%), shade-color($mynewcolor, 10%), tint-color($mynewcolor,5%), tint-color($mynewcolor, 10%), shade-color($mynewcolor,30%));
}

编译成这样：

.btn-purple {
  --bs-btn-color: #5439be;
  --bs-btn-bg: #5D3FD3;
  --bs-btn-border-color: #563ac3;
  --bs-btn-hover-color: #261762;
  --bs-btn-hover-bg: #6f54d8;
  --bs-btn-hover-border-color: #8068dd;
  --bs-btn-focus-shadow-rgb: 86, 58, 194;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #7d65dc;
  --bs-btn-active-border-color: #674ec9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5D3FD3;
  --bs-btn-disabled-border-color: #563ac3;
}

我尝试在HTML中使用它：

<button class="btn btn-purple btn-lg" type="button">Example button</button>

但没有颜色：

我的Firefox检查器没有将btn-purple显示为页面上正在使用的CSS类。是不是我漏掉了什么？