css - 无法覆盖 Bootstrap 5 实用程序

Question

我的 SCSS 结构：

主要.scss：

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

主题.scss：

...
@import "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/#sharing-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

您不必在之前添加覆盖吗@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";