css - 检索元素样式表中的原色

Question

有没有办法将 Angular Material 主题中使用的原色检索到 Angular 元素的 css 文件中？

在元素中，我们可以这样在*.scss文件中定义原色:

@import '~@angular/material/theming';

@include mat-core();

$primary: mat-palette($mat-green, 800);
$accent:  mat-palette($mat-teal, 600, A100, A400);
$warn:    mat-palette($mat-red, 600);

$theme:   mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

我尝试在我的组件中使用 *.scss 文件，但是 $primary 变量无法识别:

//*.scss file
//...
.myclass {
  background: $primary; //This line compiles with the error 'Undefined variable: "$primary".'

}

Answer 1

要使用该变量，首先必须对其进行定义。根据定义和最终更改的位置(框架通常具有某种设置或类似设置)，您需要 @import 那些。

然而，scss 通常的使用方式是有一个主文件(name.scss)和多个导入文件(_name.scss)。然后将其编译为单个 css 文件。扩展这些规则的方法是将它们添加到该主文件的末尾(或标记点)。如果您创建一个单独的“主”文件(因此创建了 css 文件)，您可能有重复的 css，即使没有，它仍然是不切实际的。

此外，您可能想使用 mat-color($theme)