如何在不重复混合的情况下将自定义材质主题包含到组件中：垫芯和角度材质主题

Question

我发现如何应用材料主题配色方案/调色板等非物质成分非常有帮助的解释在这里。

在阅读本文之前，我曾想过类似的内容，但是如果我不想仅包含全局主题，那么我将无法想象如何考虑“将您的Angular Material”应用主题化。

您的自定义主题文件不应导入其他SCSS文件。这将在CSS输出中复制样式。如果要在其他SCSS文件中使用主题定义对象（例如$ candy-app-theme），则应将主题对象的定义分解为自己的文件，并与mat-core和angular分开-材料主题混合。

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

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

Answer 1

我碰到了同样的问题，有些讨论可以发现这里和insighful博客处理这个问题在这里。

关键是-正如主题指南正确指出的那样- 在整个项目中，切勿导入mixins @include mat-core()且不要导入@include angular-material-theme($your-theme)多次。但是，当您在组件中使用SASS时，通常会希望引用您的主题变量和颜色调色板。将整个主题导入到SASS组件中是很诱人的，意外地复制了材质的mixins。

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

主题对象的定义应分为自己的文件，与包括mat-core和angular-material-theme混合包分开

但是由于起初我不清楚该怎么做，因此对于那些坚持使用它的人来说，这是一步一步的工作：

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

我的文件夹如下所示：

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在此文件中。

2. 创建一个全局主题文件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

通过这样做，我们从包括垫芯和自定义材质主题的文件中分离了部分主题，包括我们的所有自定义调色板，脚手架和变量。

3. 在Angular.json中，将my-theme文件声明为styles下的global

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

如此一来，我们的应用会始终使用自定义材质主题，但是由于主题定义（在theme局部中）与包含材质mixins（在中my-theme）是分开的，因此我们可以安全地将theme局部部分包含在任何组件中，而无需重复任何CSS。

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

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

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