Bootstrap v5.2 自定义按钮没有颜色

Question

我正在尝试在 Bootstrap 中创建一个自定义按钮 class，其中颜色为虹膜紫色。

我使用 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 class。 我错过了一步吗？

Answer 1

我认为，将 Sass 文件链接到您的 HTML 文件可能存在问题。 确保在 Bootstrap CSS 文件之前链接它。