Why doesnt my Scss mixin work in my React Project?-CodePudding

So I have a new React Project where im trying SCSS for the styling part. Im basically a SCSS noob as I've always used Css. I went online to find tutorials on how to do it and i got this code in the end:

// _themes.scss
$themes: (
    light: (
        color-background: #FAFAFA,
        color-card: #FFF
    ),
    dark: (
        color-background: #37474F,
        color-card: #212121
    )
);

// _mixins.scss
@mixin theme-aware($key, $color) {
    @each $theme-name, $theme-color in $themes {
        .theme-#{$theme-name} & {
            #{$key}: map.get(map.get($themes, $theme-name), $color)
        }
    }
}

//App.module.scss

@import "../../assets/themes/mixins";

.container {
    width: 100%;
    height: 100%;
    @include theme-aware('background', 'color-background');
}

Now I've tried about everything:

Tried to remove the module from the style sheet turning fixinf the imports
Define the mixins in the App.module.scss
Put everying (as in themes and mixins) in the App.module.scss

Here is what I know and understand so far:

The .theme-#{$theme-name} will apply to the current theme that is applied to the html parent element
This application is running and it currently switches between and (I have also tried to apply the styling to the React root element with no success)
When i define other mixins, simpler ones, not envolving map-get it works perfectly
Im using Dart Sass seen in npm here

What am I not understanding? The tutorial i saw online used node-scss and worked, so far is the only difference i can find

CodePudding user response：

You didn't use .scss extension in react if you don't use JavaScript then make sure add that language extension..

@import 
"../../assets/themes/_mixins.scss"; 
      Or

If your mixin scss file name not contain (_) underscore then use this

@import 
"../../assets/themes/mixins.scss;

CodePudding user response：

_mixins.scss is a partial file. You can try @use to import this file:-

//App.module.scss

@use "../../assets/themes/mixins" as mixin;

.container {
    width: 100%;
    height: 100%;
    @include mixin.theme-aware('background', 'color-background');
}