使用Bootstrap5添加新实用程序

遵循 B5 新文档，这是您应该如何使用新实用程序 API 添加新实用程序的方式。我还没有得到新的输出。

例子：

@import "bootstrap/scss/utilities";

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

我的文件：

@import "bootstrap.scss";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

• 我需要导入 bootstrap.scss 因为 $utilities 否则未定义
• 目标是添加一个新属性以使按钮变圆。简单示例以测试新 API。虽然不工作
• 我正在使用https://github.com/twbs/bootstrap-npm-starter来编译 scss 文件：src是 starter.scss，输出是 starter.css

我找不到新的属性按钮四舍五入

回答

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

@import "bootstrap";