小编Wil*_*ont的帖子

我的项目扩展了 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: …