Is the Bootstrap 5 way of modifying maps really the best approach?

[petehjfd]

This has been discussed previously in issue #31089 (and maybe elsewhere).

In Bootstrap 4, we could add additional variables to a map like this:

$my-custom-color: #bada55;

$theme-colors: (
    "my-custom-color": $my-custom-color
);

@import "node_modules/bootstrap/scss/variables";

All our custom variables and Bootstrap variable overrides could be stored in a single _variables.scss file, which preceded the importing of Bootstrap's _variables.scss file.

Now, in Bootstrap 5, we have to merge our custom variables into the map after Bootstrap's _variables.scss file has been imported, which ends up looking something like this:

$my-custom-color: #bada55;

@import "node_modules/bootstrap/scss/variables";

$custom-theme-colors: (
    "my-custom-color": $my-custom-color
);

$theme-colors: map-merge($theme-colors, $custom-theme-colors);

or, more realistically:

@import "variables";
@import "node_modules/bootstrap/scss/variables";
@import "variable-maps";

We end up needing to create two variables files; one for before and one for after we import Bootstrap's variables file. Is there a reason why Bootstrap 5 has switched to this arguably less elegant approach?

Thanks!