Bootstrap 5.2 remove utilities not working.

[aboutjquery]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I am using gulp to compile scss.
I used the following code directly from the documentation.

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

if I put this code after

@import "bootstrap/scss/utilities/api";
// HERE

nothing happens.

And if I put it in, an error occurred

@import "bootstrap/scss/utilities";
// HERE
@import "bootstrap/scss/utilities/api";

$map1: null is not a map.

Thanks.

Reduced test cases

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
...other components scss
@import "bootstrap/scss/utilities/api";
$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

// nothing happens.

or

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
...other components scss
$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);
@import "bootstrap/scss/utilities/api";

// error: $map1: null is not a map.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.2

[mdo]

Blah, the docs are definitely wrong on this—the customization of the $utilities map needs to come before the api import, but after the rest of the imports. Your section example should work—it did for me at least testing locally. If you can confirm one more time, I'll open a PR.

Also, I think this might work, too:

$utilities: map-remove($utilities, "width");

If you could confirm that, we might want to update our docs to include that and fix the import order.

[aboutjquery]

Thanks for reply.

I did a test, this working before utilities api import.

@import "bootstrap/scss/utilities";
$utilities: map-remove($utilities, "width");
@import "bootstrap/scss/utilities/api";

And not working after api, this without any warning or error, just nothing happens

@import "bootstrap/scss/utilities";
@import "bootstrap/scss/utilities/api";
$utilities: map-remove($utilities, "width");

I confirm one more times, this really working.

@import "bootstrap/scss/utilities";
$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);
@import "bootstrap/scss/utilities/api";

Thanks.

[mdo]

See #36444. The utilities map overrides should go between those two imports as shown in your first example.