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

【问题标题】：Importing Bootstrap into my SCSS via @use instead of @import causes problems通过 @use 而不是 @import 将 Bootstrap 导入我的 SCSS 会导致问题
【发布时间】：2020-03-06 15:38:05
【问题描述】：

我的项目扩展了 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";

我刚刚开始着手这个项目，我已经知道必须在我的所有变量（以及 mixins 和函数）前加上“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

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

【问题讨论】：

标签： twitter-bootstrap sass

【解决方案1】：

这是关于新的 SASS 模块系统的博文：http://sass.logdown.com/posts/7858341-the-module-system-is-launched

这里提到了以下几点：

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

@use 只执行一个样式表并包含一次它的 CSS，无论该样式表被使用多少次。

@use 仅使名称在当前样式表中可用，而不是在全局范围内。

名称以 - 或 _ 开头的成员对使用 @use 的当前样式表是私有的。

如果样式表包含@extend，则该扩展名仅适用于它导入的样式表，而不适用于导入它的样式表。

bold 语句是它不能与@use 指令一起使用的原因。所有导入的函数都不全局可用，这意味着文件~bootstrap/scss/variables 不知道~bootstrap/scss/functions 中声明的函数。

我真的不知道如何解决这个问题......

【讨论】：

我就是这么想的。唯一的“修复”是等待 Bootstrap 被 @use 重写。

【解决方案2】：

您收到错误是因为您在最终的@use 语句之前使用了其他语句——即覆盖$grid-breakpoints 和$container-max-widths 值的语句。

使用@use 规则你需要使用“with”关键字来覆盖那些导入的值，而不是先定义你的覆盖，然后然后使用@use。

由于您要导入整个 Bootstrap scss，因此无需单独导入 _vars 和 _functions。只需使用语句：

@use "yourpath/bootstrap/scss/bootstrap" with ( <your overrides here>)

我不确定您将如何在“with”语句中使用迭代器。

您正在做的工作的解决方案如下所示（抱歉，我没有迭代解决方案，只有文字分配）：

    @use "~bootstrap/scss/bootstrap" with (
  $grid-breakpoints:(
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  1440: 1440px,
  1600: 1600px,
  1920: 1920px,
  2560: 2560px
  ),
  $container-max-widths :(
    sm: 540px * 0.95,
    md: 720px * 0.95 ,
    lg: 960px * 0.95,
    xl: 1140px * 0.95,
    1440: 1280px,
    1600: 1480px,
    1920: 1800px,
    2560: 2300px
  )
);

提示：没有“as”关键字，命名空间将自动成为路径的最后一位，即“bootstrap”（_variables 知道 _functions 没有范围问题，反之亦然在另一条评论中建议）。

请在 sass-lang.com 网站上找到所有这些的文档： https://sass-lang.com/documentation/at-rules/use

【讨论】：

【解决方案3】：

为了详细说明已接受的答案，Bootstrap 团队认为他们无法迁移到 @use，因为大多数编译器尚未支持它（尽管 Sass 团队不再推荐 @import）。

简而言之：我们还不能切换到新的 Sass 模块系统，因为大多数构建系统还不支持@use 或@foward。

有一天我们可能会切换（可能在 v6 中）。

Source.

【讨论】：