How to use SCSS mixins with angular 7

Question

I am getting this error in my angular project.

@include for-desktop-up {...." No mixin named for-desktop-up"

My code in the styles.scss is

@mixin for-desktop-up {
    @media (min-width: 1024px) { @content; }
}

My code in a stylesheet of a component is

@include for-desktop-up {
    //some scss code
}

What am I doing wrong or what is going on?

Answer 1

Either import the file in component.ts as

styleUrls: ['./styles.scss']

or

use SASS/SCSS import to import in component.scss

@import "styles.scss";