Sass：使用@use 和@forward 时的模块循环答案

【问题标题】：Sass: module loop when using @use and @forwardSass：使用@use 和@forward 时的模块循环
【发布时间】：2021-02-20 18:48:40
【问题描述】：

在我的style.scss 中，我正在使用以下方法加载一个 scss 文件：

@use "bootstrap/functions";

稍后在style.scss 中，我加载了另一个名为_variables.scss 的scss 文件。在这个文件中，我还想使用函数文件，例如：

$link-color:                functions.theme-color("primary") !default;
@include functions.assert-ascending($grid-breakpoints, "$grid-breakpoints");

问题是我收到以下错误：

SassError: Module loop: this module is already being loaded.
   ┌──> src/assets/scss/bootstrap/_variables.scss
4  │ @forward "functions";
   │ ^^^^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> src/assets/scss/style.scss
22 │ @use "bootstrap/functions";
   │ ━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵

我尝试使用@use 和@forward 加载它，我也尝试不加载它以查看它是否可以在当前上下文中找到它，但没有任何效果。我做错了什么？

我将 Webpack 与使用 dart-sass 的 sass-loader 一起使用。

【问题讨论】：

你用过@import 吗？
我将所有内容改回导入。现在又可以工作了。

标签： javascript vue.js webpack sass

【解决方案1】：

我认为您遇到此问题的主要原因是您尝试加载两个相互依赖的文件； _functions.scss & _variables.scss，这是不可能的。要加载文件，它必须完全执行，当两者相互依赖时这是不可能的。两个文件之间只能有一个依赖项。

jacobScripts 在 sass GitHub 存储库中提出了类似的 issue。

【讨论】：

【解决方案2】：

我目前遇到了同样的问题，因为 @import 将在 2022 年 10 月贬值。

这是因为您有效地将引导程序/函数加载到您的 style.scss 中两次，一次作为自身，一次在 _variables.scss 内。

因为@use 不是全局的，就像@import 一样，它似乎会自动拒绝任何重复，抛出错误而不是忽略重复。

【讨论】：