twitter-bootstrap - 通过 @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";
我刚刚开始这个项目,我已经可以告诉我必须在我的所有变量(以及 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
我不知道这意味着什么。有任何想法吗?
解决方案
这是关于新的 SASS 模块系统的博客文章:http: //sass.logdown.com/posts/7858341-the-module-system-is-launched
这提到了以下内容:
除了命名空间之外,@use 和 @import 之间还有一些重要的区别:
- @use 只执行一个样式表并包含一次它的 CSS,不管该样式表被使用了多少次。
- @use 仅使名称在当前样式表中可用,而不是全局。
- 名称以 - 或 _ 开头的成员对使用 @use 的当前样式表是私有的。
- 如果样式表包含@extend,则该扩展名仅适用于它导入的样式表,而不适用于导入它的样式表。
粗体声明是它不适用于@use
指令的原因。所有导入的函数都不是全局可用的,这意味着文件~bootstrap/scss/variables
不知道~bootstrap/scss/functions
.
老实说,我不知道如何解决这个问题......
推荐阅读
- azure - 微软云,如何对 API 进行身份验证
- python - Django多对多自动填充用户
- c# - 如何设置我的环境以将谷歌地图与带有 react/redux 项目的 asp.net 一起使用?
- reactjs - 嵌套数组形式 - onChange 处理程序渲染缓慢 - 不变性助手
- r - R闪亮的dygraph不渲染
- c - Vscode 调试器不替换环境变量值
- python - 托管在 repl.it 上的 Python discord bot 无法正常工作
- liquibase - 如何在不重新运行 liquibase 中的语句的情况下重新计算校验和?
- wordpress - 错误地将样式和脚本排入队列
- javascript - 通过单击按钮从 API 更新 LocalStorage(数组)