twitter-bootstrapsass

Bootstrap 5 doesn't work with SASS @use and @forward


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.


Solution

  • 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