通过 @use 而不是 @import 将 Bootstrap 导入到我的 SCSS 中会导致问题

我的项目扩展了 Bootstrap 的响应断点。这是对我有用的入口点 SCSS 文件：

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

$magnetar-grid-breakpoints : (
    1440: 1440px,
    1600: 1600px,
    1920: 1920px,
    2560: 2560px
);
$grid-breakpoints : map-merge($grid-breakpoints, $magnetar-grid-breakpoints);

$magnetar-container-max-widths : ();

@each $key, $val in $magnetar-grid-breakpoints {
    $magnetar-container-max-widths : map-merge($magnetar-container-max-widths, ($key : 0.95 * $val));
}

$container-max-widths : map-merge($container-max-widths, $magnetar-container-max-widths);

@import "~bootstrap/scss/bootstrap";

我刚刚开始这个项目，我已经可以看出，必须在所有变量（以及 mixin 和函数）前面加上“magnetar-”，以免与 Bootstrap 发生冲突，这会很快变得过时。因此我想我应该尝试使用新的 Sass 模块系统@use代替@import。这是重写后的 SCSS：

@use "~bootstrap/scss/functions" as bootstrap_func;
@use "~bootstrap/scss/variables" as bootstrap_var;
@use "sass:map";

$grid-breakpoints : (
    1440: 1440px,
    1600: 1600px,
    1920: 1920px,
    2560: 2560px
);
bootstrap_var.$grid-breakpoints : map.merge(bootstrap_var.$grid-breakpoints, $grid-breakpoints);

$container-max-widths : ();

@each $key, $val in $grid-breakpoints {
    $container-max-widths : map.merge($container-max-widths, ($key : 0.95 * $val));
}

bootstrap_var.$container-max-widths : map.merge(bootstrap_var.$container-max-widths, $container-max-widths);

@use "~bootstrap/scss/bootstrap";

但以上编译时出现此错误：

SassError: @use rules must be written before any other rules.

它指的是最后一行。所以我想我会尝试将该行改回@import。这导致了这个错误：

SassError: $color: theme-color("primary") is not a color.
    ╷
174 │ $link-hover-color:                        darken($link-color, 15%) !default;
    │                                           ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_variables.scss 174:43  @use

我不知道这意味着什么。有任何想法吗？

这是博客文章 https://sass-lang.com/blog/the-module-system-is-launched#use-the-heart-of-the-module-system关于新的 SASS 模块系统。这提到了以下几点：

除了命名空间之外，@use 和 @import 之间还有一些重要的区别：

• @use 仅执行样式表并包含其 CSS 一次，无论使用该样式表多少次。
• @use 仅使名称在当前样式表中可用，而不是全局可用。
• 名称以 - 或 _ 开头的成员对于当前样式表而言是私有的（@use）。
• 如果样式表包含@extend，则该扩展仅应用于它导入的样式表，而不应用于导入它的样式表。

The bold声明是为什么它不能与@use指示。 所有导入的函数都不全局可用，这意味着该文件~bootstrap/scss/variables不知道中声明的函数~bootstrap/scss/functions.

老实说，我不知道如何解决这个问题......