Почему не импортируется миксин из global.scss?

Question

У меня есть react проект. В src я создал global.scss и пытаюсь применить его app.scss. Но почему-то переменные получается использовать, но когда пытаюсь взять оттуда миксин выдается ошибка. В чем может быть проблема и как ее исправить?

Вот global.scss:

:root{

    --base-color: blue;

    @mixin flex-position($v, $h){
        display: flex;
        align-items: $v;
        justify-content: $h;
    }
}

вот app.scc

@use "./global.scss";


.App {
    width: 100vw;
    height: 100vh;
    @include flex-position(center, center);

    h1 {
        color: var(--base-color);
    }
}

вот ошибка:

Answer 1

миксины видны только в блоке, в котором определены. В примере из вопроса это :root{...}. Если миксин должен быть виден вне блока - объявлять тоже нужно вне.
```
:root{
    ...
}

@mixin flex-position($v, $h){
    ...
}
```
при использовании use импортированные миксины собираются в namespace. Поэтому его нужно указывать для обращения к ним
```
@use "./global.scss";

.App {
    ...
    @include global.flex-position(center, center);
    ...
}
```

БЛОГ НА HUSL

Почему не импортируется миксин из global.scss?

Ответы (1 шт):