为Bootstrap 5卡盒阴影编辑SASS

Question

我正在使用 Bootstrap 5.3.3 构建一个小型仪表板。 由于我在 BS 上使用本机组件，因此我正在处理原始 SASS，添加一些颜色更改和其他一些细微更改。

但是我很难将盒子阴影添加到卡片作为默认属性。

我的自定义.scss

// --------------------------------------------------
$input-btn-padding-x:    .9rem;
$input-btn-padding-y:    .45rem;
// -------------------------
$input-btn-padding-x-sm: .8rem;
$input-btn-padding-y-sm: .28rem;
// -------------------------
$input-btn-padding-x-lg: 1rem;
$input-btn-padding-y-lg: .5rem;
// --------------------------------------------------
@import "functions";
@import "variables";
// --------------------------------------------------
$primary:   #907CF5;
$secondary: #6c757d;
$success:   #0acf97;
$info:      #39afd1;
$warning:   #ffbc00;
$danger:    #fa5c7c;
$light:     #eef2f7;
$dark:      #313a46;
// --------------------------------------------------
$theme-colors: map-merge($theme-colors, (
  "primary":   $primary,
  "secondary": $secondary,
  "success":   $success,
  "info":      $info,
  "warning":   $warning,
  "danger":    $danger,
  "light":     $light,
  "dark":      $dark
));
// --------------------------------------------------
$min-contrast-ratio: 2.5;
// --------------------------------------------------
$border-radius:     .15rem;
$border-radius-sm:  .15rem;
$border-radius-lg:  .15rem;
$border-radius-xl:  .15rem;
$border-radius-xxl: .15rem;
// --------------------------------------------------
$body-bg: #fafbfe;
// --------------------------------------------------
$font-family-sans-serif: "Asap", sans-serif;
$font-size-root:         14px;
// --------------------------------------------------
@import "bootstrap";
// --------------------------------------------------

效果完美！

但是当我添加：

$card-box-shadow: 0 0 34px 0 rgba(154, 161, 171, 0.14);

它的处理方式（在卡片组件内正确）就像

--bs-card-box-shadow: 0 0 34px 0 rgba(154, 161, 171, 0.14);

但是它没有在浏览器上渲染。

我做错了什么？ 有什么想法吗？

谢谢！

Answer 1

由于默认情况下阴影是禁用的，因此您需要先启用它们，因此请尝试设置：

$enable-shadows: true;

参见：

虽然 Bootstrap 中默认禁用组件上的阴影，但 可以通过 $enable-shadows 启用，

https://getbootstrap.com/docs/5.3/utilities/shadows/#examples