Импорт Bootstrap в мой SCSS через @use вместо @import вызывает проблемы

Question

Мой проект расширяет отзывчивые точки останова 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";

Я только начинаю работать над этим проектом, и уже могу сказать, что нужно префиксировать все мои переменные (а также миксины и функции) с помощью«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

Я заблудился относительно того, что это значит. Есть идеи?