Как использовать миксины SCSS в файле angular компонент.scss? ⇐ CSS

[Anonymous]

как дела?
Как вы используете примесь scss в компоненте Angular?
КОНТЕКСТ< /p>
Я создал файл для моих миксинов scss в /src/styles/_mixins.css и импортировал этот файл миксинов в глобальный файл стилей styles.scss вот так

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

// styles.scss
@use "variables";
@use "mixins";

Затем в файле Year-events.comComponent.scss моего углового компонента я попытался использовать свои миксины следующим образом

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

// year-events.component.scss
@use "mixins";
.events-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2rem;

@include mixins.screen-size('large') {
grid-template-columns: repeat(4, 1fr)
}
}

это не работает, и я получаю эту ошибку

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

Can't find stylesheet to import.
╷
1 │ @use "mixins";
│ ^^^^^^^^^^^^^
╵
src/app/calendar/components/year-events/year-events.component.scss 1:1  root stylesheet

Итак, после нескольких поисков он предлагает вручную импортировать файл миксинов в файл .ts моего компонента, что я и сделал.

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

@Component({
selector: 'app-year-events',
standalone: true,
imports: [
EventCardComponent,
],
templateUrl: './year-events.component.html',
styleUrls: ['./year-events.component.scss', '/src/styles/_mixins.scss'], // added this
})
export class YearEventsComponent implements OnInit {}

но всегда одна и та же ошибка. В чем причина этого? Разве импорт чего-либо в глобальный файл стилей styles.scss не должен принести пользу всем компонентам?
voici mon fichier _mixins.scss

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

//_mixins.scss
@mixin screen-size($breakpoint) {
@if $breakpoint == 'small' {
@media (max-width: 600px) {
@content
}
} @else if $breakpoint == 'medium' {
@media (min-width: 768px) {
@content
}
} @else if $breakpoint == 'large' {
@media (min-width: 1024px) {
@content
}
}
}

Для пояснения: когда я использую миксин в файле styles.scss, он работает следующим образом

Подробнее здесь: https://stackoverflow.com/questions/791 ... -scss-file