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.

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