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?

Vladikavkaz

You're global styles don't get imported by default into the components styles so you have to add an @import 'styles' into the components scss file – Karlykarlyn

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";

Promethium

does this bloat up my project if I import it into several components considering my styles.scss has other styling code? – Vladikavkaz

no, its not bloating if you import required code :) – Promethium

you should create a mixin.scss and write all the mixins in there and import it. instead of a global file – Promethium

that is exactly what I was asking – Vladikavkaz

To clarify, typically how we do this to avoid bloat is DO NOT WRITE any sass code that will be written out if imported, ie. actual css, within the imported/shared file. Only include sass mixins, functions, ie. logical code in the imported/shared file. If you only include these, you can import them as many times as you want within it printing out any css to the build. If you include actual css, it will add redundant css to the output bundle. It's okay if there is "real css" within the mixin or function - that won't be duplicated. – Horme