3

I use Angular2 and angular-cli in my project. I defined some Sass variables in the global style.scss file. How can I access these variables from my custom components (from component.scss)? Мaybe I have to import the separate file with these variables in each component.scss file.

Nadya S.
  • 43
  • 1
  • 5
  • 1
    Welcome to stack overflow :-) Please look at [ask] and how to create a [mcve]. This will help to get useful answers. – JimHawkins Oct 18 '16 at 07:20

1 Answers1

9

You should put your variables inside a seperate .scss file like _vars.scss. Notice the underscore in front of the name. This will tell the compiler that the file should not be compiled. Which means you can only use it with @import.

Then for instance in your component.scss you can do (at the top of your file):

@import "path/to/vars";

No need to add the underscore nor the extension

Poul Kruijt
  • 69,713
  • 12
  • 145
  • 149
  • I tried this but did not work for me. I am not able to have variables in my scss file. Please see my post here:http://stackoverflow.com/questions/40401501/how-to-use-sass-in-angular2-application. Hope you may help. – Peter Nov 04 '16 at 05:43
  • Would this create duplicate code? Or is that what you mean by "tell the compiler that the output of the file should not be embedded." I'm not familiar with SASS inside of a component architecture so I'm not sure how Angular2 handles this. – adam-beck Mar 18 '17 at 17:20
  • variables, extendables, mixins and functions do not have an output when compiled. So no :). It's not about being angular2 or whatever framework, it's all plain scss – Poul Kruijt Mar 19 '17 at 13:36