Angular load component styles after global styles

Issue

How can I load my scss variables, mixin, etc. in a component style in Angular?

My src/styles.scss

$primary: #00aaff;

/* ... */

@mixin center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

and src/app/mycomponent/mycomponent.component.scss

.content {
    @include center;
    color: $primary;
}

It doesn't know about the @mixin and $primary variable.

Solution

To solve this problem I just imported the scss file that I needed in this case:

@import "src/styles.scss";

Answered By - FortyGazelle700