Sass: module loop when using @use and @forward

Question

In my style.scss I am loading a scss file by using:

@use "bootstrap/functions";

Somewhat later in the style.scss I load another scss file called _variables.scss. In this file I also want to use the functions file, for example by doing:

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

The problem is that I am getting the following error:

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
   ╵

I tried loading it with @use and @forward, I also tried not loading it to see if it can find it in the current context, but nothing works. What am I doing wrong?

I am using Webpack with the sass-loader that uses dart-sass.

Answer 1

I'm currently having the same issue, due to @import being depreciated in October 2022.

This is because you're effectively loading bootstrap/functions into your style.scss twice, once as itself, and once within _variables.scss.

Because @use isn't global, like @import is, it seems to automatically reject any duplications, throwing an error rather than ignoring the duplicate.

Answer 2

I think the main reason you're having this issue is that you're trying to load two files that depend on each other; _functions.scss & _variables.scss and this just isn't possible. To load a file, it must be fully executed and this isn't possible when both are depending on each other. There can only be one dependent between two files.

A similar issue was raised on the sass GitHub repo by jacobScripts.