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

3bygqnnd 于 2023-01-10 发布在 Bootstrap

关注(0)|答案(3)|浏览(275)

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

我才刚刚开始这个项目，我已经知道，为了不与Bootstrap冲突，必须在所有变量（以及mixin和函数）前面加上“magnetar-”，这很快就会过时。因此，我想给予新的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

来源：https://stackoverflow.com/questions/58793074/importing-bootstrap-into-my-scss-via-use-instead-of-import-causes-problems

3条答案

按热度按时间

but5z9lq1#

这是一篇关于新SASS模块系统的博客文章，其中提到了以下内容：
除了命名空间之外，@use和@import之间还有一些重要的区别：

@use只执行一次样式表并包含其CSS，而不管该样式表被使用多少次。
*@use仅使名称在当前样式表中可用，而不是全局可用。
名称以-或_开始的成员是当前样式表的私有成员，使用@use。
如果样式表包含@extend，则该扩展名仅应用于它导入的样式表，而不应用于导入它的样式表。
bold语句是它不能与@use指令一起工作的原因。所有导入的函数都不是全局可用的，这意味着文件~bootstrap/scss/variables不知道~bootstrap/scss/functions中声明的函数。

我真的不知道该怎么解决这个问题。

赞(0）回复(0）举报 2023-01-10

enxuqcxy2#

您会得到一个错误，因为您在最后的@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上查找所有这些文档

赞(0）回复(0）举报 2023-01-10

j2qf4p5b3#

为了详细说明公认的答案，Bootstrap团队认为他们不能迁移到@use，因为大多数编译器还不支持它（即使Sass团队不再推荐@import）。
简而言之：我们还不能切换到新的Sass模块系统，因为大多数构建系统还不支持@use或@foward。
有一天我们可能会切换（可能在v6）。
来源。

赞(0）回复(0）举报 2023-01-10