Add new utilities with Bootstrap 5 - sass

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.

Answer 2

Bootstrap 5.0.1, somehow no luck with map-merge($utilities ...)
but bootstrap has one more extension point: by overriding every $var default value
following will merge inside #import '~bootstrap/scss/utilities';
$utilities: (
'event-type': (
property: background-color,
class: 'event-type', // <- somehow this required
values: (
commit: #BADA55,
issue: #C0FFEE,
),
),
);
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import '~bootstrap/scss/utilities';
#import '~bootstrap/scss/utilities/api';

Answer 3

Since Bootstrap 5.2. update you need to proceed a little different. There is new maps file added.
If you are working with SCSS and you would like to modify colors you should add maps to your SCSS file.
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2
and then:
$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
and finally:
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/utilities";
and the rest.

Answer 4

As of Bootstrap 5.0.1 this would be more appropriate:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
#import "bootstrap/scss/helpers";
#import "bootstrap/scss/utilities/api";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
Importing "bootstrap" at the end is not required anymore.

Answer 5

For bootstrap 5.1.3 from documentation
Don't forget #import "bootstrap/scss/maps"; as it's needed by utilities.
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/maps";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap/scss/utilities/api";