Angular 2 extend a style from styles.scss

Question

In Angular 2, I have a CSS class in my styles.scss file:

.FirstClass {
}

I'm trying to extend this class in a component's .SCSS file (eg.: MyComponent.scss) like:

.SecondClass {
  @extend .FirstClass;
}

I'm getting an error that says .FirstClass is not found. Do I assume correctly that class and style in styles.scss can be globally referred? Please help me in this.

Answer 1

If you have any file, and you want to use one of its classes in another file, you have to import it first.

styles.scss

.FirstClass{}

MyComponent.scss

@import 'styles.scss'
.SecondClass{
 @extend .FirstClass;
}

SCSS is compile to CSS, hence, if you need to make any changes in the file itself that not related plain css, you have to take it into consideration.