使用 @use 配置 Bootstrap Sass 变量，同时使 bootstrap 成员在当前模块中可用

Question

我想使用我自己的变量配置Bootstrap 4 的 Sass 文件，然后能够导入其他 sass 文件中所有 Bootstrap 的配置成员（并使用 WebPack :export{}magic）。

\n

我通常会声明我的变量，然后@import "~bootstrap/scss/bootstrap"在其中添加一个，如下所示：

\n

$primary: #eee;\n$body-color: $primary;\n@import "~bootstrap/scss/bootstrap";\n:export{ primary: $primary; body-color: $body-color;}\n

\n

但正如Sass 文档提到的：

\n

\n

Sass 团队不鼓励继续使用 @import 规则。Sass 将在未来几年内逐步淘汰它，并最终将其从语言中完全删除。更喜欢 @use 规则。

\n

\n

@与()一起使用：

\n

标记为@use的变量可以!default通过添加来覆盖with ($variable: value) ，但您必须@use在文件顶部编写指令（在声明可以配置它的任何变量之前）。我能接受的最好的办法是：

\n

@use "~bootstrap/scss/bootstrap" with (primary: #eee, body-color: #eee);\n:export{ primary: bootstrap.$primary; body-color: bootstrap.$body-color;}\n

\n

非常简单，但我无法在配置的变量之间共享值，并且 Bootstrap 的成员不会从文件中导出！（#eee我希望它们共享一个保存该值的变量，而不是声明多个变量）。

\n

meta.load-css($url, $with):

\n

另一种方法是使用 sass' 元 mixin meta.load-css，它允许您加载和配置模块，而不受限制在文件顶部执行此操作。（并且能够在它之前声明变量）但这是以不加载任何已加载模块的成员为代价的：

\n

\n

这不会使已加载模块中的任何成员在当前模块中可用。

\n

\n

与混合

\n

Sass 文档提到使用 mixins 来更彻底地配置导入的模块，我无法真正理解如何通过阅读他们的示例来实现这一点，也许这将是一个可行的解决方案？

\n

问题：

\n

那么，如何使用共享覆盖变量配置 Bootstrap Sass 文件（在加载配置中，从模块导出并通过 Webpack 导出）？这可能吗？

\n

\n