如何在不复制 mixin 的情况下将自定义材料主题包含到组件中:mat-core 和 angular-material-theme [英] How to include custom material themes into components without duplicating mixins: mat-core and angular-material-theme

问题描述

我找到了一个关于如何为其他非材料组件应用材料主题配色方案/调色板的非常有用的解释 此处.

I found a very helpful explanation about how to apply material theme color schemes/palettes for other non-material-components here.

在我读这个之前，我想到了类似的东西，但无法想象如何考虑来自主题化你的 Angular Material 应用，如果我不想只有全局主题:

Before I read this, I thought of something similar but couldn't imagine how to consider the recommendation from Theming your Angular Material app, if I don't want to have only global themes:

您的自定义主题文件不应导入到其他 SCSS 文件中.这将在您的 CSS 输出中复制样式.如果你想在其他 SCSS 文件中使用你的主题定义对象(例如 $candy-app-theme)，那么主题对象的定义应该分解成它自己的文件，与包含 mat-core 和 angular 的文件分开-material-theme 混合.

Your custom theme file should not be imported into other SCSS files. This will duplicate styles in your CSS output. If you want to consume your theme definition object (e.g., $candy-app-theme) in other SCSS files, then the definition of the theme object should be broken into its own file, separate from the inclusion of the mat-core and angular-material-theme mixins.

我想知道这个建议是否意味着应该只使用全局样式表/主题?否则我无法想象如何在不违反上述建议的情况下将 scss-theme 导入到组件的 scss 文件中.

I wonder if this recommendation means that only global style sheets/ themes should be used? Otherwise I cannot imagine how to import the scss-theme into a component's scss-file without violating the above recommendation.

我是 Sass 的新手，可能在这里遗漏了一些东西.

I am new to Sass and maybe missing something here.

推荐答案

我遇到了同样的问题，部分讨论可以找到 这里，以及一个处理这个问题的令人感慨的博客此处.

I came across the same problem, some of the discussion can be found here, and an insighful blog dealing with the issue here.

要点是 - 正如主题指南正确指出的 - 你不应该导入 mixins @include mat-core() 和 @include angular-material-theme($your-theme) 在整个项目中不止一次.但是当你在你的组件中使用 SASS 时，你经常想要引用你的主题变量和 mat-color 调色板.很容易将整个主题导入到组件 SASS 中，不小心复制了材质混合.

Point is that - as the theming guide correctly states - you should never import mixins @include mat-core() and @include angular-material-theme($your-theme) more than once in your entire project. But when you're working with SASS in your components, you often do want to refer to your theme variables and mat-color palette. It's tempting to import your entire theme into the component SASS, accidentally duplicating the material mixins.

我认为我最终得到的解决方案是主题指南描述的解决方案

The solution I ended up with I think is the one the theming guide describes

主题对象的定义应该分解成它自己的文件，与包含 mat-core 和 angular-material-theme 混合的内容分开

the definition of the theme object should be broken into its own file, separate from the inclusion of the mat-core and angular-material-theme mixins

但由于我最初不清楚如何去做，这里有一个步骤供任何人坚持:

but since it was initially unclear to me how to do it, here's a step by step for anyone stuck with the same:

1. 创建一个包含 SASS 部分的 assets/styles/partials 文件夹

我的文件夹如下所示:

assets/styles/partials/
  _palette.scss     // custom material palettes
  _scaffolding.scss // general mixins
  _theme.scss       // <-- our theme definition
  _variables.scss   // global variables like fonts and colors

_theme 部分包含以下内容:

// assets/styles/partials/_theme.scss
@import '~@angular/material/theming';
@import 'variables';
@import 'scaffolding';
@import 'palette';

$my-primary: mat-palette($mat-primary);
$my-accent: mat-palette($mat-accent);
$my-warn: mat-palette($mat-warn);

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

就是这样.不要不要在这个文件中包含材质混合mat-core和angular-material-theme.

That's it. Do not include the material mixins mat-core and angular-material-theme in this file.

1. 创建一个全局主题文件assets/styles/my-theme.scss.它只包含三行:

1. create a global theme file assets/styles/my-theme.scss. It contains just three lines:

// assets/styles/my-theme.scss
@import 'partials/theme';                    // our actual theme definition
@include mat-core();                         // the required mat-core mixin
@include angular-material-theme($my-theme);  // the declaration of our custom material theme

通过这样做，我们将主题部分(包括所有自定义调色板、脚手架和变量)与包含 mat-core 和自定义材质主题的文件分开.

By doing this we have separated our theme partial, including all our custome palette, scaffolding and variables, from the file that includes mat-core and our custom material theme.

1. 在 Angular.json 中，在样式下将您的 my-theme 文件声明为全局

"styles": [ "src/assets/styles/my-theme.scss" ]

这样，我们的应用程序始终使用我们的自定义材料主题，但因为主题定义(在 theme 部分中)与包含材料混合(在my-theme)，我们可以安全地将 theme 部分包含到任何组件中，而无需复制任何 css.

With this, our app uses our custom material theme throughout, but because the theme definition (in the theme partial) is separate from the inclusion of material mixins (in my-theme), we can safely include our theme partial into any component without duplicating any css.

或者，您可以通过将部分路径添加到 Angular.json 中的 stylePreprocessorOptions 来简化主题部分的导入:

Optionally, you can simplify the import of our theme partial by adding the partials path to the stylePreprocessorOptions in Angular.json:

"build": {
  (...)
  "options": {
    (...)
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/assets/styles/partials"
      ]
    }
  }
}

在任何组件 scss 文件中只需 @import 'theme'，我们就可以访问所有变量和材质主题功能，例如 mat-color :)

Simply @import 'theme' in any component scss file and we have access to all our variables and the material theming functions such as mat-color :)

这篇关于如何在不复制 mixin 的情况下将自定义材料主题包含到组件中:mat-core 和 angular-material-theme的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！