CODEWITHSUNDEEP
angularsassscopeextend
EEAH
EEAH

Reputation: 747

Angular SCSS - @extend scope

The class .testt in the global style sheet:

.testt{
  color: red;
}

Including (@extend) that class into another class of a component A is not working

compA.scss

.compA__body {
    @extend .testt;
}




Error:

SassError: The target selector was not found.
Use "@extend .center !optional" to avoid this error.
   ╷
32 │     @extend .center;
   │     ^^^^^^^^^^^^^^^
   ╵

How to fix this scope issue ?

Upvotes: 1

Views: 1592

Answers (1)

Sam Willis
Sam Willis

Reputation: 4211

You need to use @import 'path/to/global/stylesheet'; to have access to the classes in there, This will however add those classes into your component style sheet too.

The best solution would be to have a partial scss file which contains the properties you want to extend as a placeholder selector, this way you are only importing scss that will not compile into classes itself, and you will be free to extend them in your components.

_extends.scss

%test {
  color: red;
}

component.styles.scss

@import 'path/to/_extends.scss';

.compA__body {
    @extend %test;
}

Upvotes: 8

Related Questions