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

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        

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

Answer 1

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

\n

\n
• 创建一个类似于 的文件_my-theme.scss，前导下划线使其成为 sass 部分。
\n
• 在该文件中，仅通过调用material\xe2\x80\x99s函数来定义主题。请注意，这只是一个函数，它只是创建一个大的 Sass 贴图，材质库的其余部分使用该贴图来实际生成样式。它本身并不像 mixin 那样生成 \xe2\x80\x9c 样式\xe2\x80\x9d 样式。material-light-theme
\n
• 在 global/root 样式文件中， import 'my-theme'，然后@include颜色/样式 mixin。
\n
• 在您的组件文件中，仅从我的自定义主题部分导入，而不是从根文件导入
\n

\n

然而，对于 Sass 和 Angular 12 的最新版本，更好的方法是@import使用@use地处理这些部分文件中的 \xe2\x80\x9csharing\xe2\x80\x9d 公共代码的语法，而不是使用 。简单示例/起始代码

\n

_my-theme.scss

\n

@use "~@angular/material" as mat;\n\n$my-theme-dark: mat.define-dark-theme(\n  // stuff here\n);\n

\n

根styles.scss

\n

\n@use "~@angular/material" as mat;\n@use './my-theme' as my-theme;\n\n@include mat.core()\n\n// general style defaults\n\n.app-dark {\n  @include mat.all-component-colors(my-theme.$my-theme-dark);\n}\n\n

\n

some-component.scss

\n

\n@use "~@angular/material" as mat;\n@use 'my-theme' as my-theme;\n\n// do anything with mat and your definitions from my-theme\n

\n