无法覆盖 Bootstrap 5 实用程序

Question

我的SCSS结构：

main.scss：

@import '~bootstrap/scss/functions';
@import 'theme/variables';
@import '~bootstrap/scss/bootstrap';
@import 'theme/theme';

主题.scss：

...
@import "utilities"

utilities.scss：

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

以上基本上是文档中的示例。这应该添加新的溢出实用程序类。然而，没有添加任何内容。有什么想法吗？

Answer 1

将

@import "bootstrap/scss/bootstrap"

移至附加实用程序声明之后。

更多详情

在撰写此答案时（2021 年 5 月），对于

Bootstrap v5.0.0-beta3，以下解决方案应该有效，如官方文档中所述：

https://getbootstrap.com/docs/5.0/utilities/api/#changing-utilities

使用相同的密钥覆盖现有实用程序。

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

@import "bootstrap/scss/bootstrap";

请注意：

• @import "bootstrap/scss/bootstrap"

   应位于

  之后附加公用事业的声明。

现场演示：https://www.codeply.com/p/oX8ELBwVgB

Answer 2

您是否尝试过此操作，如 BS 官方文档中关于

API / 启用响应式 中所述？

该示例适用于“边框”实用程序，我尝试了这样的操作，并且它有效：

$utilities: map-merge(
  $utilities, (
    "overflow": map-merge(
      map-get($utilities, "overflow"),
      ( responsive: true ),
    ),
  )
);

Answer 3

您是否必须在

@import "~bootstrap/scss/utilities";

之前添加覆盖

// Your utilities overrides
$utilities: (
    "text-decoration": (
        property: text-decoration,
        class: td,
        state: hover,
        values: none underline line-through overline,
    ),
);

@import "~bootstrap/scss/utilities";