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

在 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        

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

stack overflow How to generate the same color styles not multiple times in angular?
原文答案

答案:

作者头像

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

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

但是,对于 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