如何使用自定义颜色@extend 引导类答案

【问题标题】：how to @extend bootstrap classes using customized colors如何使用自定义颜色@extend 引导类
【发布时间】：2021-01-05 13:25:10
【问题描述】：

您好 Stackoverflow 粉丝，

如何使用自定义颜色@extend 引导类？

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

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

下面的类编译和工作

.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； │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

下面的代码按预期工作，但我想用 my-info-card2 替换 css 类：

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

【问题讨论】：

你在@importing 自定义变量文件吗？
border-gray-5 定义在哪里？
@nschonni 我正在自定义引导程序 4.1 我做的一切都是正确的。见这里：getbootstrap.com/docs/4.1/getting-started/theming
@Zim border-gray-5 是由 Bootstrap 自动创建的，因为我在 $theme-colors 中定义了颜色 gray-5。 Bootstrap 在编译时在其数千个 scss 文件中完成其余的工作。

标签： twitter-bootstrap bootstrap-4 sass node-sass

【解决方案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

另见：
How to extend/modify (customize) Bootstrap 4 with SASS
How to change the bootstrap primary color?

【讨论】：