How do I pull in scss variables using @use from Bootstrap 5?

[jgeurts]

Hi,

I have a simple stylesheet for a component in my site and I'm trying to pull in the $zindex-fixed variable, but my approach seems to have issues. Any help would be appreciated!

My stylesheet looks like:

@use "~bootstrap/scss/variables";

.playerBar {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 90px;
  min-width: 620px;
  width: 100%;
  z-index: variables.$zindex-fixed;
  background: #1e1e1e;
}

I'm getting the following error:

SassError: Undefined mixin.
    ╷
307 │ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_variables.scss 307:1  @use

This is using Bootstrap 5.0.0-beta1 with sass 1.30.0. Please let me know if I can provide more info to help diagnose!

[florianlacreuse]

You also need to import _functions.scss:

https://getbootstrap.com/docs/5.0/customize/sass/#importing

[jgeurts]

I was hoping to avoid using @import since it’s discouraged by the sass team.

[mdo]

Bootstrap would need to support the new Sass module system for @use to be fully compatible as far as I know. Until then, @imports are the best way to use Bootstrap with Sass :).

[jgeurts]

I’m not familiar with the complexities involved to support the module system. Is that something that would be doable for v5 or would that be pushed to v6+?

[mdo]

We're not doing it in v5 and I'm not going to comment on v6 yet since we're probably pretty far off there haha.

[dotnetshadow]

@mdo I noticed you tried the sass migrator once to see how bootstrap 5 could work with the module system (#31978).

Just wondering if it actually worked or not?
Is there a way we could run the sass-migrator tool to create our own version, until bootstrap officially supports it?