Bootstrap says in its documentation that the customization is working with dart-sass but it's just not true.
The @use and @forward module system of the latest version of dart-sass is not supported.
The "former" way to add custom colors, with @import, was :
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$custom-theme-colors: (
"testbeige": beige,
"testgreen": lightgreen,
);
// merge the custom colors to the theme-colors
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
// global bootstrap styles
@import "./node_modules/bootstrap/scss/bootstrap.scss";
As you can see I'm using @import and it's working nicely.
But in the SASS's doc, they advice not to use @import anymore, that it will be removed from SASS soon.
So, all right, let's try the @use !
@use "./node_modules/bootstrap/scss/functions";
@use "./node_modules/bootstrap/scss/variables";
@use "./node_modules/bootstrap/scss/utilities";
// no need to go further, it's already not working
// you can also try with @forward, it's the same
The terminal spit an error about the line below, and "$theme-colors" is underlined :
in the terminal -> $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
Indeed it is underlined, since the scss file is not using the module dotation syntax, hence we canno't use @use and @forward in Bootstrap v5.
Dart-sass has been here for years now, and the @import is deprecated, so why did they keep that syntax ? I've lost hours trying to implement this for nothing.
And, just in case I'm wrong, where did I fail to implement a Bootstrap customization with @use and @forward ?
Thanks a lot.
This is also an issue I'm facing with v4. I found this article a little bit ago, and figured I'd pass it along. The last post has a quote from Bootstrap themselves stating the SASS module system may not see light until v6. Hope this helps you, as it does me! :)
Importing Bootstrap into my SCSS via @use instead of @import causes problems