Building v6

[miken32]

I assume I'm doing something wrong here, I'm testing migration from v5 and Sass keeps telling me variables and mixins don't exist. e.g.

@use "bootstrap/scss/bootstrap";

.myclass {
    padding: $spacer / 2;
}
@include media-breakpoint-down(sm) {
       ...
}

Result:

Error: [sass] Undefined variable.
   ╷
52 │             padding: $spacer / 2;
   │                      ^^^^^^^
   ╵
...
Error: [sass] Undefined mixin.
    ╷
315 │ ┌ @include media-breakpoint-down(sm) {
...
348 │ └ }

It's running via Laravel Vite, I haven't touched the processor config yet. Any thoughts?

[miken32]

I know for the first one I can use the --bs-spacer CSS variable; should I be using that instead?

[julien-deramond]

Both work, they just do different jobs. $spacer (or the $spacers map) is a Sass value that is resolved when you compile, so it is the right choice when you need to calculate with it in Sass. The --bs-spacer custom property is resolved by the browser, so it follows any override made at runtime (for instance on a container) and is the better fit when plain CSS is enough: padding: calc(var(--bs-spacer) / 2);.

One thing to check in your build: in v6 the --bs- prefix is added by a PostCSS step, not by Sass, so when you compile the Sass yourself the variable may be named --spacer unless your PostCSS config adds the prefix. Look at the compiled CSS to see which name you get.

[patkon]

I've only just started working with v6 myself, but my guess is:

@use "sass:math";
@use "bootstrap/scss/config" as *; 
@use "bootstrap/scss/mixins/breakpoints" as *;

.myclass {
  padding: math.div($spacer, 2);   // or calc($spacer / 2)
}

@include media-breakpoint-down(sm) {
  // ...
}

or

@use "sass:math";
@use "bootstrap/scss/bootstrap" as *;
@use "bootstrap/scss/mixins/breakpoints" as *; // maybe, I don't know

.myclass {
  padding: math.div($spacer, 2);   // or calc($spacer / 2)
}

@include media-breakpoint-down(sm) {
  // ...
}

And as I understand it: @use only affects the file it’s written in. Every partial that needs Bootstrap’s variables or mixins needs its own @use

[miken32]

The main Bootstrap file makes all the others available with @forward rules – it would not be practical to include every file you want to use separately.

[julien-deramond]

Nothing is wrong with your setup. With @use, Sass no longer puts everything in one global scope like @import did: the members of a module live behind a namespace, which defaults to the last part of the URL. For @use "bootstrap/scss/bootstrap" that namespace is bootstrap, so you reach the variable and the mixin through it:

@use "sass:math";
@use "bootstrap/scss/bootstrap";

.myclass {
    padding: math.div(bootstrap.$spacer, 2);
}

@include bootstrap.media-breakpoint-down(sm) {
    // ...
}

Two other v5 habits to update on the way: / no longer divides in Dart Sass (use math.div(), or * .5), and if you would rather not type the namespace everywhere you can write @use "bootstrap/scss/bootstrap" as *; to get the v5-style bare names back.

Here it is running with bootstrap@6.0.0-alpha.1 and Vite: https://stackblitz.com/edit/1ffdaakt?file=src%2Fmain.scss

[julien-deramond]

It clearly shows that something was missing in the docs and/or the migration guide. I tried to enhance it via #43235 :)

[miken32]

Thanks, that is helpful; it's at least partly on me for not checking the docs on @use versus @import 😅

[julien-deramond]

TBH, it's a bit hidden in the docs too 😅 Hopefully #43235 makes the right info easier to discover 🤞