如何在不重复混合的情况下将自定义材质主题包含到组件中:垫芯和角度材质主题 [英] 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.

在我读到这篇文章之前，我想到了类似的内容，但无法想象如何考虑

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分开-材料-主题混合.

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主题导入到组件的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时，通常确实希望引用主题变量和颜色调色板.将整个主题导入到SASS组件中是很诱人的，意外地复制了材质的mixins.

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

通过执行此操作，我们已将包括部分自定义面板，脚手架和变量在内的部分主题与包括垫芯和自定义材料主题的文件分开.

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中，将我的主题文件声明为具有样式的全局文件

"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.

(可选)您可以通过将partials路径添加到Angular.json中的stylePreprocessorOptions来简化我们的主题partial的导入:

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"
      ]
    }
  }
}

只需@import 'theme'在任何组件scss文件中，我们都可以访问所有变量和材料主题功能，例如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 :)

这篇关于如何在不重复混合的情况下将自定义材质主题包含到组件中:垫芯和角度材质主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！