使用 Bootstrap 5 添加新实用程序答案

【问题标题】：Add new utilities with Bootstrap 5使用 Bootstrap 5 添加新实用程序
【发布时间】：2021-03-30 05:46:36
【问题描述】：

根据 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

【问题讨论】：

标签： sass utilities bootstrap-5

【解决方案1】：

当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。

【讨论】：

感谢 zim 的回复！我让它工作了。
我只是自己发现了这一点，这是主要引导导入需要遵循的艰难方式。如果文档提到这一点，那就太好了。由于他们使用@import 而不是@use，我们基本上是导入这三个文件functions、variables 和utilities 两次，因为主要@import "bootstrap" 还导入了这三个文件，这不必要地增加了的CSS。这是他们打算使用实用程序 API 的方式吗？每个 SASS “每个样式表都会在每次被 @imported 时执行并发出其 CSS，这会增加编译时间并产生臃肿的输出”
我一直在想同样的事情。我能找到的所有答案都说 import bootstrap after 但就像你说的，应该没有必要再次重新导入所有内容。
这就是 SASS 的工作原理......这不是一个引导程序

【解决方案2】：

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';

【讨论】：

这是我发现的唯一一个无需重新导入所有引导程序就可以工作的东西，谢谢！

【解决方案3】：

从 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,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

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

【讨论】：