Sharing variables between shared files using #use - ruby-on-rails-7

Question

Currently migrating from sass to dart-sass.
Using #use and #forward is not a problem for any *.scss file outside shared folder.
Problem:
When to stylesheets/shared/_variables.scss add #use "functions" as *; as it uses function example-ui-color, getting:
Question:
Is there some different approach to achieve this?
Error: Module loop: this module is already being loaded.
┌──> app/assets/stylesheets/shared/_functions.scss
1 │ #use "variables" as *;
│ ^^^^^^^^^^^^^^^^^^^^^ new load
╵
┌──> app/assets/stylesheets/example/example.scss
1 │ #use "shared/variables" as *;
| │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
| ╵
| shared/_functions.scss 1:1 #use
| shared/_variables.scss 3:1 #use
| app/assets/stylesheets/example/example.scss 1:1 #use
| app/assets/stylesheets/application.scss 2:1 root stylesheet
File structure:
stylesheets/shared/
_functions.scss
_mixins.scss
_variables.scss
stylesheets/example/
example.scss
stylesheets/application.scss
// stylesheets/shared/_functions.scss
#use "variables" as *;
#use "sass:map";
#function example-ui-color($color, $variant: 'normal') {
#return map.get(map.get($example-ui, $color), $variant);
}
// stylesheets/shared/_mixins.scss
#use "variables" as *;
#use "sass:list";
#use "sass:map";
#mixin break($size) {
#media (min-width: map.get($breakpoints, $size)) {
#content;
}
}
// stylesheets/shared/_variables.scss
#use "functions" as *; // when add this, error happens
$example-ui: (
'grey': ('lightest': #eeeeee, 'light': #d2d2d2, 'normal': #c1c1c1, 'dark': #999, 'darkest': #3a3a3a),
'green': ('lightest': #d7e8c4, 'light': #bde093, 'normal': #6cc04a, 'dark': #28a834, 'darkest': #00833e),
'blue': ('lightest': #cce5f4, 'light': #b6c2e9, 'normal': #62b3e5, 'dark': #0b3486, 'darkest': #071d49),
'red': ('lightest': #f7eae4, 'light': #f0b3ca, 'normal': #e45385, 'dark': #dd3a76, 'darkest': #f9423a),
'orange': ('lightest': #ffe1c6, 'light': #ffbe85, 'normal': #f78d2d, 'dark': #e57a18, 'darkest': #d75f00),
);
$breakpoints: (
xs: 360px,
sm: 768px,
md: 992px,
lg: 1024px
);
$footer_border_top: example-ui-color('blue', 'darkest');
$gap: 16px;
// stylesheets/example/example.scss
#use "shared/variables" as *;
#use "shared/mixins" as *;
#use "shared/functions" as *;
li.responsible-contact a {
border: 1px solid example-ui-color('grey', 'normal');
}

Answer 1

You are using advanced Sass concepts that I don't use myself but something is quite obvious here :
_functions.scss partial uses variables
_variables.scss partial uses functions
It is recursive and you end up in a loop.
Basically you have to shape your partials in a way they don't rely on each other.
for example I have a folder abstracts which contains the following partials :
_colors.scss
_mixins.scss
_responsive.scss
_values.scss
And none of them uses any other partial. Because each of these partials do their own job. For example Colors have only color variables ... They are basically atomic.
Maybe you can rethink the way you design your SCSS framewok to have it work without any recursion
One idea is to create a higher level partial that would uses many partials from your shared folder and use this partial instead of the children partials independently.