Bootstrap 5 不适用于 SASS @use 和 @forward

Question

Bootstrap 在其文档中说自定义正在使用 dart-sass 但事实并非如此。

不支持最新版dart-sass的@use和@forward模块系统

使用@import 添加自定义颜色的“以前”方式是：

@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";

$custom-theme-colors: (
  "testbeige": beige,
  "testgreen": lightgreen,
);

// merge the custom colors to the theme-colors
$theme-colors: map-merge($custom-theme-colors, $theme-colors);

// global bootstrap styles
@import "./node_modules/bootstrap/scss/bootstrap.scss";

如您所见，我正在使用 @import，它运行良好。

但是在 SASS 的文档中，他们建议不要再使用 @import，它将很快从 SASS 中删除。

好吧，让我们试试@use !

@use "./node_modules/bootstrap/scss/functions";
@use "./node_modules/bootstrap/scss/variables";
@use "./node_modules/bootstrap/scss/utilities";

// no need to go further, it's already not working
// you can also try with @forward, it's the same

终端吐出关于下面一行的错误，“$theme-colors”带有下划线：

在终端 -> $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;

确实有下划线，因为scss文件没有使用module dotation语法，所以我们不能在Bootstrap v5.

中使用@use和@forward

Dart-sass 已经存在多年，@import 已被弃用，那么他们为什么要保留该语法？我花了好几个小时试图白白实现它。

而且，以防万一我错了，我在哪里未能使用 @use 和 @forward 实现 Bootstrap 自定义？

非常感谢。

Answer 1

这也是我在使用 v4 时遇到的问题。我不久前发现了这篇文章，并认为我会把它传下去。最后一个 post 引用了 Bootstrap 自己的话，指出 SASS 模块系统可能在 v6 之前见不到光。希望这对你有帮助，就像对我一样！ :)

Bootstrap 5 不适用于 SASS @use 和 @forward

Bootstrap 5 doesn't work with SASS @use and @forward

sass

twitter-bootstrap