使用 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

当进行 Bootstrap 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 目前处于测试阶段，我为此提交了问题报告。

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

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

Answer 4

对于引导程序 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";

还有其余的。

Answer 6

自 Bootstrap 5.2 起，的作用如下：

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (95: 95%),
        ),
      ),
    ),
  )
);

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