无法覆盖 Bootstrap 5 实用程序答案

【问题标题】：Cannot override Bootstrap 5 utilities无法覆盖 Bootstrap 5 实用程序
【发布时间】：2020-11-21 04:12:39
【问题描述】：

我的 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,
  ),
);

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

【问题讨论】：

看来我必须将它们保存在 variables.scss 中。我想知道是否有办法将其保存在theme.scss。
我在 bs4 中遇到了类似的问题，变量范围覆盖，不确定这是否对你有用，因为我还没有玩过 bs5 alpha...stackoverflow.com/questions/54009129/…
尝试在variables.scss 之前导入theme.scss！这可能行得通。

标签： css twitter-bootstrap sass bootstrap-5

【解决方案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

【讨论】：

【解决方案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";

【讨论】：