Angular

Question

我已经升级了我的 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。

我在这里错过了什么？

Answer 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';

现在您可以同时使用 bootstrap 实用程序（例如 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>

Angular - Bootstrap 5 "utilities" 未编译

Angular - Bootstrap 5 "utilities" not compiled

utilities

sass

bootstrap-5

解决方案