[SOLVED] Angular - Bootstrap 5 "utilities" not compiled

Angular - Bootstrap 5 "utilities" not compiled

I've upgraded my angular app to use the bootstrap 5 styles. Since bootstrap 5 removed many utilities like cursor-pointer, I now have to define the utilities I want to use myself. I've tried to use the api as described in the docs, but without success. The so called utilities I write never end up in the resulting css file.

In the styles.scss I have written the following utility according to the docs:

/* 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
            )
        )
    )
);

So this should be compiled to style rules like .cursor-pointer { cursor: pointer } and .cursor-grab { cursor: grab }. But when I look in the resulting styles.css, the rules I defined are nowhere to be found.

I've published a repository here.

What am I missing here?

Solution

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

Instead of importing the bootstrap.scss through angular.json, import it from 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';

Now you can use both the bootstrap utilities (eg. float-end) and your own utilities (eg. 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>