如何在角度不多次生成相同的颜色样式？

Question

在 Angular 中，我生成了一个自定义主题文件、一个根样式文件，并且我的所有组件都有自己的自定义样式文件。但是，由于我更新到版本 10，我的终端被警告发送垃圾邮件

WARNING: The same color styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md
    node_modules/@angular/material/_theming.scss 1648:7  -mat-check-duplicate-theme-styles()
    node_modules/@angular/material/_theming.scss 7010:3  angular-material-theme()
    node_modules/@angular/material/_theming.scss 7061:3  angular-material-color()
    src/_custom_theme.scss 242:3                         @import
    stdin 2:9        

按照指南，我可以将此错误减少到至少四个到达。此错误列出了我的 node_modules 中的 custom_theme 文件和 @angular/material。 我真的很想知道我做错了什么导致这个错误。在我的 custom_theme 的第 242 行，我正在生成我的深色主题 .custom-dark-theme { @include angular-material-color($app-theme-dark); }

Answer 1

一般要做的是避免你的组件 sccs @import-ing 一个文件本身 @includes 材料核心 mixins 之一。因此，您可以在部分中定义主题和一些可共享的主题常量/混合，然后在导入主题定义的全局样式中创建样式。更明确地说：

• 创建一个类似_my-theme.scss 的文件，前导下划线使它成为一个sass 部分。
• 在此文件中，仅通过调用材料的material-light-theme函数定义主题。请注意，这只是一个函数，它只是创建一个大的 Sass 贴图，材质库的其余部分使用它来实际生成样式。它本身并不像 mixins 那样“生成”样式。
• 在全局/根样式文件中，导入'my-theme'，然后导入@include color/styles mixin。
• 在您的组件文件中，仅从我的自定义主题部分导入，而不是从根文件导入

但是，在 Sass 和 Angular 12 的更新版本中，更好的方法是使用 @import 而不是使用 @use 语法，它可以更好地处理这些部分文件中的“共享”公共代码。简单示例/入门代码

_my-theme.scss

@use "~@angular/material" as mat;

$my-theme-dark: mat.define-dark-theme(
  // stuff here
);

根styles.scss

@use "~@angular/material" as mat;
@use './my-theme' as my-theme;

@include mat.core()

// general style defaults

.app-dark {
  @include mat.all-component-colors(my-theme.$my-theme-dark);
}

some-component.scss

@use "~@angular/material" as mat;
@use 'my-theme' as my-theme;

// do anything with mat and your definitions from my-theme