Bootstrap 5.3.3自定义SCSS设置卡片box-shadow不显示问题

1. Bootstrap 5.3 默认不把阴影变量绑定到基础.card元素 #

Bootstrap 5.3 里，$card-box-shadow 变量是给 .card-shadow 类准备的，默认所有 .card 元素不会自动应用这个阴影。你看到生成了 --bs-card-box-shadow CSS 变量，但没给卡片加对应的类，自然看不到效果。

解决办法：

• 给需要阴影的卡片手动加 .card-shadow 类，比如：

  <div class="card card-shadow">...</div>
  

• 如果想让所有卡片默认带阴影，在自定义变量里加上：

  $card-shadow-enabled: true; // 开启默认卡片阴影
  $card-box-shadow: 0 0 34px 0 rgba(154, 161, 171, 0.14);
  

  这样 Bootstrap 会自动给所有 .card 元素添加上 box-shadow: var(--bs-card-box-shadow);

2. 检查自定义变量的导入顺序 #

虽然你已经生成了 CSS 变量，但还是要确认：自定义变量的定义必须在导入 Bootstrap 核心 SCSS 文件之前，不然你的变量会被 Bootstrap 默认值覆盖。正确的顺序应该是：

// 自定义变量
$card-box-shadow: 0 0 34px 0 rgba(154, 161, 171, 0.14);
$card-shadow-enabled: true; // 可选，按需开启

// 导入 Bootstrap 核心
@import "../node_modules/bootstrap/scss/bootstrap";

3. 排查样式优先级冲突 #

打开浏览器开发者工具，选中卡片元素，查看「计算样式」（Computed）里的 box-shadow 属性：

• 如果显示 none 或者其他值，说明有更高优先级的样式覆盖了它（比如自定义的 .card { box-shadow: none; } 或者 !important 规则）
• 检查变量 --bs-card-box-shadow 是否正确解析，有没有拼写错误或者 rgba 值不合法（比如 alpha 值超出 0-1 范围）

4. 确认 Bootstrap 版本对应 #

你用的是 5.3.3，这个版本的 $card-box-shadow 变量确实是用来生成 --bs-card-box-shadow 的，但要注意：旧版本 Bootstrap 可能变量名不同（比如 5.2 及之前是 $card-shadow），不过你已经生成了正确的 CSS 变量，这步大概率没问题。

内容的提问来源于stack exchange，提问作者kold-kreator