使用Bootstrap 5添加新实用程序 [英] Add new utilities with 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，否则$Utility未定义
• 目标是添加一个新属性以使按钮变圆。测试新API的简单示例。虽然无法正常工作
• 我正在使用https://github.com/twbs/bootstrap-npm-starter编译SCSS文件： src为starter.scss，输出为starter.css

我找不到新属性四舍五入

推荐答案

当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添加新实用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！