如何使用 @use 引用引导 scss 变量？

Question

我的站点中有一个简单的组件样式表，我正在尝试引入$zindex-fixed 变量，但我的方法似乎有问题。任何帮助将不胜感激！

我的样式表如下：

@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;
}

我收到以下错误：

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

这是使用 Bootstrap 5.0.0-beta1 和 sass 1.30.0。如果我可以提供更多信息来帮助诊断，请告诉我！

Answer 1

Bootstrap v5中有no current plans支持sass模块系统。目前，解决方案是使用@import 而不是@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;
}