Twitter bootstrap 如何使用自定义颜色@扩展引导类

各位粉丝好

如何使用自定义颜色@扩展引导类

首先，我在custom-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
);

现在我想创建一些基于（扩展）引导类的定制类。例如：

下面的类编译并运行

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

下面的类不编译

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

我得到一个编译错误：

SassError:找不到目标选择器。 使用“@extend.border-gray-5！optional”可避免此错误。 ╷ 130│ @扩展.card、.border-gray-5、.m-3、.mt-2； │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

下面的代码按预期工作，但我希望将css类替换为my-info-card2：

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

---

您定义了

border-gray-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;
}

另请参见：

---

您是否导入了自定义变量文件？

border-gray-5

定义在哪里？@nschonni我正在自定义引导4.1我做的一切都很好。请参见此处：@Zim

border-gray-5

是通过引导自动创建的，因为我在

$theme colors

中定义了颜色

gray-5

。Bootstrap在编译时在其数千个scss文件中完成其余的工作。