css - 如何在不复制 mixins 的情况下将自定义 Material 主题包含到组件中 : mat-core and angular-material-theme

Question

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

在我读到这篇文章之前，我想到了类似的东西，但无法想象如何考虑来自 Theming your Angular Material app 的推荐。 ，如果我不想只有全局主题:

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

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

Answer 1

我遇到了同样的问题，可以找到一些讨论here ，以及处理该问题的富有洞察力的博客 here .

要点是 - 正如主题指南正确指出的那样 - 你永远不应该导入 mixins @include mat-core() 和 @include angular-material-theme($your-theme) 在你的整个元素中不止一次。但是当你在你的组件中使用 SASS 时，你通常想要引用你的主题变量和 mat-color 调色板。将整个主题导入组件 SASS 很诱人，意外地复制了 Material 混合。

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

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

但由于我一开始并不清楚如何去做，这里有一个步骤供任何遇到同样问题的人使用:

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

就是这样。 不要在此文件中包含 Material 混合 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 和我们的自定义 Material 主题的文件分开。

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

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

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

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

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

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