SCSS Mixin issue due to use

I have a file called _mixins.scss. I @use it in a file called _index.scss along with my other partials. I @forward all of these in my home.scss file.

The contents of _mixins.scss are

@mixin flexCenter($flex-direction){
    // If height is required, add manually

The contents of _index.scss are

@use 'resets' as *;
@use 'fonts' as *;
@use 'mixins' as *;

(All files paths are correct)

@forward '../'; // imports all the styles from index.scss
// @import '../mixins';

    @include flexCenter(row);


However when I try to use my mixin, I get an error.

Error: Undefined mixin.
@include flexCenter(row);

My folder structure is


_mixins.scss and _index.scss are in the scss directory while home.scss is in the home directory.

Funnily enough, when I use the old deprecated @import, my mixin works.
How can I fix this issue?

I haven’t actually tried it, but shouldn’t _index.scss be using @forwart and home.scss should be using @use?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.