How can I properly utilize a scss mixin within an Angular component?
SITUATION
I've organized my scss mixins in a file located at /src/styles/_mixins.css and included this mixins file into the global style file styles.scss like so:
// styles.scss
@use "variables";
@use "mixins";
However, when attempting to apply these mixins in the year-events.component.scss file of my angular component using the following syntax:
// 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)
}
}
I encounter an error message stating:
Can't find stylesheet to import.
╷
1 │ @use "mixins";
│ ^^^^^^^^^^^^^
╵
src/app/calendar/components/year-events/year-events.component.scss 1:1 root stylesheet
Furthermore, despite manually importing the mixins file into my component's .ts file as advised after conducting thorough research, the same error persists.
@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 {}
This raises the question of why the imported mixins in the global style file styles.scss do not extend their functionality to all components as expected.
Here is a snippet from my _mixins.scss file for reference:
//_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
}
}
}
To clarify, when utilizing the mixin in the styles.scss file exclusively, it operates correctly as demonstrated below: