7

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?

YulePale
  • 6,688
  • 16
  • 46
  • 95
  • 3
    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 – Sjoerd de Wit May 17 '19 at 15:21

1 Answers1

6

Either import the file in component.ts as 

styleUrls: ['./styles.scss']

or

use SASS/SCSS import to import in component.scss

@import "styles.scss";
dota2pro
  • 7,220
  • 7
  • 44
  • 79
  • does this bloat up my project if I import it into several components considering my styles.scss has other styling code? – YulePale May 17 '19 at 15:28
  • 2
    no, its not bloating if you import **required** code :) – dota2pro May 17 '19 at 15:28
  • 1
    you should create a mixin.scss and write all the mixins in there and import it. instead of a global file – dota2pro May 17 '19 at 15:29
  • 1
    that is exactly what I was asking – YulePale May 17 '19 at 15:33
  • 5
    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. – Ryan Weiss Dec 18 '19 at 17:14