Bootstrap v5.2自定义按钮无样式：btn-purple类未生效排查

问题描述 #

尝试在Bootstrap中用Sass自定义鸢尾紫（iris-purple）按钮变体，编写了如下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%));
}

编译后得到对应的CSS类：

.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文件已正确引入HTML：检查HTML的<head>部分，是否通过<link>标签引入了包含.btn-purple类的编译后CSS文件，而非仅引入原生Bootstrap的CSS。示例：

  <!-- 错误：仅引入原生Bootstrap -->
  <link href="bootstrap.min.css" rel="stylesheet">
  <!-- 正确：引入包含自定义类的编译后CSS -->
  <link href="your-custom-bootstrap.css" rel="stylesheet">
  

• 检查Sass编译输出：打开编译生成的CSS文件，确认其中确实存在.btn-purple的完整代码。如果没有，说明编译过程出错，需检查Sass编译器配置、文件路径（比如@import的Bootstrap路径是否匹配项目结构）。
• 清除浏览器缓存：浏览器可能缓存了旧版CSS文件，按下Ctrl+F5（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，加载最新的CSS内容。
• 核对类名拼写：确认HTML中的类名是btn-purple，无拼写错误（如大小写错误、漏写字母等），这是容易忽略的细节。
• 确认Sass代码顺序：你的代码已在导入Bootstrap后编写自定义类，这是正确的——必须先导入Bootstrap的Sass文件，才能使用button-variant混合宏。若顺序颠倒，会导致混合宏未定义，编译失败。

内容的提问来源于stack exchange，提问作者QuantumBlink