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

MojioMS
2020-07-03  
2057  
    
1  

在 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); }

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

答案:

作者头像
tplusk
2021-08-28    2      原文

一般要做的是避免您的组件 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

相关问题

标签