Angular 6sass global variables

Question

I defined a variable like this in the global scss called styles.scss in angular6

$color-redpink-dark: #E84A5F;

and I want to use the variable in a scss component, but when I declare the property I have the next output:

  background-color: $color-redpink-dark;               
  Undefined variable: "$color-redpink-dark".

Should not the component scss use the color defined in the global scss?

Greetings.

can you check your angular.json file and see if your global styles.scss is there? — Ian Preglo
– Ian Preglo, Commented Apr 26, 2019 at 13:30
can you show your styles.scss file? I am assuming that it is in the correct folder structure as defined in your angular.json file (ie. when it says "src/global/styles.scss" in your angular.json, the styles.scss file should be physically inside the src/global folder) so I want to inspect how you are declaring the variables. If all is good, then you can use the @import command to load your global scss file into your component. — Ian Preglo
– Ian Preglo, Commented Apr 26, 2019 at 22:41

hohnzy · Accepted Answer · 2019-04-26 13:05:15Z

1

You have to import the file with defined variable in the beginning of component.scss file using the variable:

@import 'your-file-name';

background-color: $color-redpink-dark;

answered Apr 26, 2019 at 13:05

hohnzy

734 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1