问题
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
回答1:
When making any 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.
来源:https://stackoverflow.com/questions/65376233/add-new-utilities-with-bootstrap-5