Angular load component styles after global styles-CodePudding

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.

CodePudding user response：

You can try this instead
File style.scss

root {
  --primary: #000;
}

File My.scss

.myClass {
  background: var(--primary);
}

CodePudding user response：

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

@import "src/styles.scss";