使用 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 未定义
目标是添加一个新的属性来制作按钮 rounded.simple 示例来测试新的 API。虽然不工作
我正在使用 https://github.com/twbs/bootstrap-npm-starter 来编译 scss 文件： src 是 starter.scss 并且输出是 starter.css

我找不到新的属性 button-rounded

Answer 1

当时，@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。

Answer 2

从 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”。

Answer 3

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

Answer 4

来自 documentation

的 bootstrap 5.1.3

不要忘记 @import "bootstrap/scss/maps";，因为公用事业需要它。

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

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

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

Answer 5

自 Bootstrap 5.2。 update 您需要进行一些不同的操作。添加了新的 maps 文件。

如果您正在使用 SCSS 并且想要修改颜色，您应该将地图添加到您的 SCSS 文件中。

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2

然后：

$custom-colors: (
        "white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

最后：

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

以及其他。

使用 Bootstrap 添加新实用程序 5

Add new utilities with Bootstrap 5

utilities

sass

bootstrap-5