使用 Bootstrap 5 添加新实用程序

Question

遵循 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

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

Answer 1

当进行引导SASS自定义，则@import "bootstrap"应该去后的变化。此外，实用程序文件需要变量文件，变量文件需要函数文件，因此您必须在更改之前导入所有 3...

@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";

演示

由于 Bootstrap 5 目前是测试版，我已经为此提交了一份问题报告。