使用 Bootstrap 5 添加新实用程序

如何解决使用 Bootstrap 5 添加新实用程序

按照 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

我找不到新属性 button-rounded

解决方法

当 making Bootstrap SASS customizations 时，@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";

Demo

由于 Bootstrap 5 目前是测试版，我已经为此提交了 issue report。

,

从 Bootstrap 5.0.1 开始，这会更合适：

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

$utilities: map-merge(
  $utilities,)
);

不再需要在最后导入“bootstrap”。

,

Bootstrap 5.0.1，不知何故 map-merge($utilities ...)

但是 bootstrap 还有一个扩展点：通过覆盖每个 $var 默认值

以下将合并到 @import '~bootstrap/scss/utilities';

$utilities: (
  'event-type': (
    property: background-color,class: 'event-type',// <- somehow this required
    values: (
      commit: #BADA55,issue: #C0FFEE,);

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/utilities/api';