Sass Error: Module loop: this module is already being loaded.
- default.scss <--
@use "base";;
- base/_index.scss <-- @use "fonts";
- fonts/_index.scss <-- @use "../../abstracts";
- tools/_index.scss <-- @forward "functions";
- functions/_index.scss <-- @forward "gutter";
- _gutter.scss <-- @use "../../abstracts" as *;
- folder "abstracts" contains variables and settings of all sorts (e.g. breakpoints, colors, globals, spacings, typography, etc.)
- folder "tools" contains functions and mixins (possibly require variables defined in abstracts)
- both abstracts and tools will be used project wide (e.g. accessing color variables or use breakpoint mixin in sass components)
- folder "base" contains styles for pure html elements (e.g. html, body, ul, h1, etc.)
I need to access variables from abstracts in multiple places.
Also, I want to access variables within abstractions itself like use variable x in abstraction a from abstraction b.
How does this work without running into the module loop problem?1 Reply
Another example:
Let’s say you have files A, B, and C, where
- A forwards B and C
- B uses C
- C uses B.
Partials A, B, C are in the same folder “abstracts”. _index.scss (A) forwards _global.scss (B) and _unit.scss (C). _global.scss (B) “uses” sass-functions from _unit.scss (C). And _unit.scss (C) “uses” global variables from _globals.scss (B).
How is this possible? 🤯
I also want to use parts of B and C in D which could be another partial that lives somewhere else (for instance, _cards.scss in components folder). So I would load A with
@use "abstracts" as * (which forwards B and C) to access variables/functions/mixins from both B and C.