Angular - Bootstrap 5“实用程序”未编译答案

【问题标题】：Angular - Bootstrap 5 "utilities" not compiledAngular - Bootstrap 5“实用程序”未编译
【发布时间】：2021-09-12 01:09:39
【问题描述】：

我已将我的 Angular 应用升级为使用 bootstrap 5 样式。由于 bootstrap 5 删除了许多实用程序，例如 cursor-pointer，我现在必须定义我自己想要使用的实用程序。我尝试使用 api as described in the docs，但没有成功。我编写的所谓实用程序永远不会出现在生成的 css 文件中。

在 styles.scss 中，我根据文档编写了以下实用程序：

/* You can add global styles to this file, and also import other style files */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
    $utilities,
    (
        "cursor": (
            property: cursor,
            class: cursor,
            // responsive: true,
            // values: auto pointer grab
            values: (
                pointer: pointer,
                grab: grab
            )
        )
    )
);

所以这应该被编译成像.cursor-pointer { cursor: pointer }和.cursor-grab { cursor: grab }这样的样式规则。但是当我查看生成的 styles.css 时，找不到我定义的规则。

我已经发布了repository here。

我在这里错过了什么？

【问题讨论】：

标签： angular sass bootstrap-5 utilities

【解决方案1】：

解决方案

https://stackblitz.com/edit/angular-ivy-mzexcm?file=src%2Fstyles.scss

不要通过angular.json 导入bootstrap.scss，而是从styles.scss 导入：

angular.json

{
  ...,
  "projects": {
    "ng-draggable-listview-demo": {
      ...,
      "architect": {
        "build": {
          ...,
          "options": {
            ...,
            "styles": [
              //"node_modules/bootstrap/scss/bootstrap.scss",
              "projects/ng-draggable-listview-demo/src/styles.scss"
            ]
          }
        },
        ...
      }
    }
  }
}

src/styles.scss

$utilities: () !default;

$utilities: map-merge(
    $utilities,
    (
        "cursor": (
            property: cursor,
            class: cursor,
            values: (
                pointer: pointer,
                grab: grab
            )
        )
    )
);

@import '~bootstrap/scss/bootstrap.scss';

现在您可以同时使用引导实用程序（例如 float-end）和您自己的实用程序（例如 cursor-grab）：

<body>
  <ul class="list-group cursor-grab">
    <li class="list-group-item" *ngFor="let item of items">
      <span class="float-end">{{ item }}</span>
    </li>
  </ul>
</body>

【讨论】：