SCSS Mixin issue due to use

HTML-CSS
1

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){
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:$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';

.landing-section{
    @include flexCenter(row);

    height:100vh;
}

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

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

My folder structure is

scss/home

_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?

2

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

3

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