sass - Add new utilities with Bootstrap 5

Question

Following the B5 new documentation, this is how you are supposed to add new utilities with the new utilities API. I have not been the get the new output though.

exemple:

@import "bootstrap/scss/utilities";

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

my file:

@import "bootstrap.scss";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

• I need to import bootstrap.scss because $utilities is undefined otherwise
• the goal is to add a new property to make the button rounded.simple example to test out the new API. not working though
• I am using the https://github.com/twbs/bootstrap-npm-starter to compile the scss files: the src is starter.scss and the output is starter.css

I cannot find the new property button-rounded

Answer 1

When making Bootstrap SASS customizations, the @import "bootstrap" should go after the changes. Also, the utilities file requires the variables file, and the variables file requires the functions file, so you must import all 3 before the change...

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "button-rounded": (
      property: border-radius,
      class: button-rounded,
      values: (
        null: 20px,
      ),
    ),
  )
);

@import "bootstrap";

Demo

Since Bootstrap 5 is currently beta, I've submitted an issue report for this.