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

问题描述

嗨，Stackoverflow风扇，

如何使用自定义颜色@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
);

现在，我想基于（扩展）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│@extend .card，.border-gray-5，.m-3，.mt-2； │^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

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

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

解决方法

您定义的是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?