Angular 在全局样式之后加载组件样式

Question

如何在 Angular 中以组件样式加载我的 scss 变量、mixin 等？

我的src/styles.scss

$primary: #00aaff;

/* ... */

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

和src/app/mycomponent/mycomponent.component.scss

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

它不知道 @mixin 和 $primary 变量。

Answer 1

你可以试试这个
文件 style.scss

root {
  --primary: #000;
}

文件My.scss

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

Answer 2

为了解决这个问题，我刚刚导入了我在这种情况下需要的 scss 文件：

@import "src/styles.scss";

Angular load component styles after global styles