How to use SCSS mixins in angular component.scss file?

how are you?

How do you use a scss mixin in an Angular component?

CONTEXT

I created a file for my scss mixins in /src/styles/_mixins.css and imported this mixins file into the global style file styles.scss like this

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


Then in the year-events.component.scss file of my angular component I tried to use my mixins like this

// 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)
}
}


it doesn't work and I get this error

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


And so, after several searches, it says to manually import the mixins file into my component's .ts file, which I did.

@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 {}


but always the same error. What's the reason for this? Shouldn't importing something into the global style file styles.scss benefit all components?

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
}
}
}


Just to clarify, when I use the mixin in the styles.scss file, it works as follows

Continue reading...