Sass 使用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,
      ),
    ),
  )
);

我的文件：

@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。但不起作用
• 我正在使用编译scss文件： src是starter.scss，输出是starter.css

我找不到新属性按钮，当

@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目前是beta版，我已经为此提交了一份报告。

自Bootstrap 5.0.1起，这将更合适：

@import“bootstrap/scss/functions”；
@导入“bootstrap/scss/variables”；
@导入“引导/scss/utilities”；
@导入“引导/scss/helpers”；
@导入“bootstrap/scss/utilities/api”；
$utilities:地图合并(
$utilities，
(
“按钮圆形”：(
属性：边界半径，
类别：按钮圆形，
价值观：(
空：20px，
),
),
)
);Bootstrap5.0.1，在地图合并（$utilities…）

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

以下内容将合并到
@import'~bootstrap/scss/utilities'中


$utilities:(
“事件类型”：(
属性：背景色，
类：'事件类型'，//谢谢zim的回复！我让它开始工作了。我自己才发现这是主引导导入需要遵循的艰难方式。如果文档提到这一点，那就太好了。因为他们使用的是
@import
而不是
@use
，我们基本上是导入这3个文件
函数
，
variables
和
utilities
主
@import“bootstrap”
也会导入那些不必要地增加css大小的3个文件。这是他们打算使用utilities API的方式吗？根据SASS每次@imported时，都会执行每个样式表并发出其CSS，这会增加编译时间并产生臃肿的输出