如何使用 @use 引用 bootstrap 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;
}

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

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

sass

bootstrap-5