如何在不重复 mixin 的情况下将自定义材质主题包含到组件中：mat-core 和 angular-material-theme

Question

我找到了一个非常有用的解释，说明如何将材料主题配色方案/调色板应用于其他非材料组件here。

在阅读本文之前，我想到了类似的东西，但无法想象如果我不想只有全局主题，如何考虑 Theming your Angular Material app 的建议：

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

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

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

Answer 1

你现在应该有这个了：

@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

但你应该以此为目标：

// First file variables.scss
@import '~@angular/material/theming';
@include mat-core();

$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);

// Second file
@import 'src/variables';

$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

我是这么理解的。

Answer 2

我遇到了同样的问题，一些讨论可以找到here，以及一个处理问题的有见地的博客here。

要点是——正如主题指南正确指出的那样——你不应该在整个项目中多次导入 mixins @include mat-core() 和 @include angular-material-theme($your-theme)。但是当您在组件中使用 SASS 时，您通常确实希望引用您的主题变量和 mat-color 调色板。将整个主题导入到组件 SASS 中很诱人，不小心复制了材质 mixins。

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

主题对象的定义应该被分解到它自己的文件中，与 mat-core 和 angular-material-theme mixins 的包含分开

但由于我最初不清楚该怎么做，所以对于遇到相同问题的人来说，这里是一步一步的：

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。

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

// 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 和自定义材质主题的文件分开。

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

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

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

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

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

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