How do I reference a bootstrap scss variable using @use?

Jim_Geurts_3085 0
Viewed 603

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!

bootstrap-5 sass
1 Answers

There are no current plans to support the sass module system in Bootstrap v5. For now, the solution is to use @import instead of @use:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

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