如何在 Bootstrap 中添加实用程序类？ [复制]

Question

按照 Bootstrap v5 中的文档here，我正在尝试使用 scss 添加游标实用程序类。我先加载了 _utilities.scss，然后我有了这个（根据文档）：

@import "bootstrap/scss/utilities";

    $utilities: map-merge(
      $utilities,
      (
        "cursor": (
          property: cursor,
          class: cursor,
          responsive: true,
          values: auto pointer grab,
        )
      )
    );

然后我将这个类添加到我的元素中：

<a href="#" class="cursor-grab">Grab this</a>

但是，在 CSS 输出中找不到 cursor-grab 类。知道我做错了什么吗？

Answer 1

我已回复similar question。 @import "bootstrap" 需要跟随更改。 utilities 文件需要variables 文件，variables 文件需要functions 文件，所以你必须在更改前@import 全部3：

@import "functions";
@import "variables";
@import "utilities";
    
    $utilities: map-merge(
      $utilities,
      (
        "cursor": (
          property: cursor,
          class: cursor,
          responsive: true,
          values: auto pointer grab,
        )
      )
    );

@import "bootstrap";

Demo

Bootstrap 5 仍处于测试阶段。关注此issue report 以标记进度。