如何使用自定义颜色@extend bootstrap 类

Question

嗨 Whosebug 粉丝，

如何使用自定义颜色 @extend bootstrap classes？

首先，我在自定义中创建了自定义颜色-bootstrap.scss:

$theme-colors: (
  'primary': #3b86ff,
  'secondary': #6c757d,
  'success': #28a745,
  'error': #dc3545,
  'white': #FFFFFF,
  // Neutrals
  'grey-0': #f9f9fa,
  'grey-1': #eceef0,
  'grey-2': #dee1e5,
  'grey-3': #cfd3da,
  'grey-4': #bfc4cd,
  'grey-5': #adb3bf,
  'grey-6': #98a0ae,
  'grey-7': #828a97,
  'grey-8': #666d77,
  'grey-9': #3c3f46
);

现在我想创建一些基于（扩展）Bootstrap classes 的自定义 classes。例如：

下面的class编译运行

.my-info-card {
  @extend .card, .bg-light, .border, .bg-secondary, .text-dark;
}

下面的class不编译

.my-info-card2 {
 @extend .card, .border-gray-5, .m-3, .mt-2;
}

我遇到编译错误：

SassError：找不到目标选择器。使用“@extend .border-gray-5 !optional”来避免这个错误。 ╷ 130 │ @extend .card, .border-gray-5, .m-3, .mt-2; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

下面的代码按预期工作，但我想用 my-info-card2:

替换 css class

<div class="card border-gray-5 m-3 mt-2">

Answer 1

您定义的 border-grey-5 不是 border-gray-5。这就是您如何创建一个名为 grey-5 的新主题颜色并扩展其中一个生成的类:

$theme-colors: (
  "primary": #7400d9,
  "grey-5": #adb3bf,
);

.my-info-card2 {
   @extend .card, .border-grey-5, .m-3, .mt-2;
}

Codeply

另见：

如何使用自定义颜色@extend bootstrap 类

how to @extend bootstrap classes using customized colors

sass

twitter-bootstrap

node-sass

bootstrap-4