Как переодеться с @Import на @USE в SCSS ⇐ CSS

[Anonymous]

Я сломал некоторый код, изменив от импорта на использование. Идея состоит в том, чтобы создать гибкий и многоразовый файл стиля типографии, который можно использовать для генерации кучу классов для стиля приложения.

Код: Выделить всё

@import "@fontsource/rubik/400.css"; // regular
@import "@fontsource/rubik/500.css"; // medium
@import "@fontsource/rubik/600.css"; // semi-bold

:root {
--ion-font-family: 'Rubik';
}

// Text class mixin
@mixin textClass($size, $prefix: 'text-', $class: '', $suffix: '', $tag: '') {
$selector: '';

@if $class =='' {
$selector: '.#{$prefix}#{$suffix}';
}

@else {
$selector: '.#{$class}';
}

@if $tag !='' {
$selector: '#{$tag},#{$selector}';
}

#{'#{$selector}'} {
font-family: var(--ion-font-family);
font-size: #{$size};
font-style: normal;
font-weight: 400;
line-height: normal;
@content;
}
}

// .headline, h1
@include textClass(42px, $class: headline, $tag: 'h1') {
font-weight: 400;
};

@include textClass(18px, $suffix: button-label) {
font-weight: 500;
letter-spacing: 0.32px;
padding: 5.5px 0;
text-transform: none !important;
}

@include textClass(18px, $suffix: medium) {
line-height: 24px;
}
< /code>
Это можно использовать вокруг приложения, как это: < /p>
 my-chool-whatsit.component.scs
@import '
/typography.scss';
.whatsit-button {
...
@extend .text-button-label;
...

}
< /code>
Я мигрирую несколько версий угловых и делаю много улучшений. И было настоятельно предложено уйти от использования @Import по «причинам». Тем не менее, я изо всех сил пытаюсь получить это, казалось бы, прямое обращение в работу! Типографический файл остается как есть ... < /p>
@use '/typography' as typo;

{
...
@include typo.text-medium;
...
}
< /code>
не правильно. Ни один из них не: < /p>
@use '/typography' as typo;

{
...
@extend typo.text-medium;
...
}

Небольшая конкретная информация была бы отличной для этого?


Подробнее здесь: https://stackoverflow.com/questions/794 ... se-in-scss