Thiết kế website giá rẻ

Question

I have the following SASS directory structure:

- abstracts
  - functions
   - _css-vars.scss
   - _fluids.scss
   - _index.scss
   - _numbers.scss
   - _units.scss
  - mixins
   - _custom-properties.scss
   - _font-face.scss
   - _index.scss
  - variables
   - _border-radiuses.scss
   - _colors.scss
   - _fluids.scss
   - _font-families.scss
   - _globals.scss
   - _index.scss

And I get the following error:


SassError: Module loop: this module is already being loaded.
  ┌──> assets/styles/abstracts/functions/_css-vars.scss
2 │ @use "@mindk/styles/abstracts/variables";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
  ╵
  ┌──> assets/styles/abstracts/mixins/_custom-properties.scss
2 │ @use "@mindk/styles/abstracts/variables";
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  assets/styles/abstracts/functions/_css-vars.scss 2:1         @forward
  assets/styles/abstracts/functions/_index.scss 1:1            @use
  assets/styles/abstracts/variables/_border-radiuses.scss 1:1  @forward
  assets/styles/abstracts/variables/_index.scss 2:1            @use
  assets/styles/abstracts/mixins/_custom-properties.scss 2:1   @forward
  assets/styles/abstracts/mixins/_index.scss 1:1               @use
  assets/styles/base/_root.scss 1:1                            @forward
  assets/styles/base/_index.scss 1:1                           @use
  assets/styles/main.scss 3:1                                  root stylesheet

And here are the contents of my files:

**main.scss:**
@use "vendors";
@use "base";
@use "layout";
@use "components";
@use "pages";
@use "themes";


**_root.scss:**
@use "@mindk/styles/abstracts/mixins";
@use "@mindk/styles/abstracts/variables";

:root {

    @include mixins.custom-properties(variables.$border-radiuses, "border-radius");
    @include mixins.custom-properties(variables.$colors, "color");
    @include mixins.custom-properties(variables.$font-families, "font-family");
}

**_custom-properties.scss:**
@use "sass:meta";
@use "@mindk/styles/abstracts/variables";

@mixin custom-properties($map, $group: null, $namespace: variables.$namespace) {

    @if null != $group and "string" == meta.type-of($group) and "" != $group {
        $group: $group + "-";
    }

    @if "map" == meta.type-of($map) {

        @each $key, $value in $map {

            @if "map" == meta.type-of($value) {

                @include custom-properties($value, #{$group + $key}, $namespace);
            } @else {
                --#{$namespace}-#{$group + $key}: #{meta.inspect($value)};
            }
        }
    }
}

**_border-radiuses.scss**
@use "@mindk/styles/abstracts/functions";

$border-radiuses: (
    "none": 0,
    "small": functions.rem(8px),
    "large": functions.rem(16px),
    "pill": functions.rem(999px),
);

**_css-vars:**
@use "sass:meta";
@use "@mindk/styles/abstracts/variables";

@function css-var($name, $group: null, $fallback: null, $namespace: variables.$namespace) {

    @if "string" != meta.type-of($name) or "" == $name {

        @return null;
    }

    @if null != $group and "string" == meta.type-of($group) and "" != $group {
        $group: $group + "-";
    }

    @if null == $fallback {

        @return var(--#{$namespace}-#{$group + $name});
    }

    @return var(--#{$namespace}-#{$group + $name}, #{$fallback});
}

Now keep in mind the _index.scss files are only forwarding the files inside the same folder with @forward.

I have check the peer modules issue in Github(https://github.com/sass/sass/issues/2774) but creating a file to fix the loop doesn’t make sense to me.

Now I get the module loop error but what would the best way to re-factor the files in a way that variables can use the functions folder and the functions folder use the variables folder for default values in the arguments?

I have tried adding a main _index.scss to call all inner folders inside the abtrastc and just use the following line:

@use “abstracts” as *;

Still the same issue where I guess would be the use of variable inside functions and vice-versa.

Danh mục