Question

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

在我读这篇文章之前，我想过类似的内容，但是如果我不想只包含全局主题，那么我将无法考虑如何考虑Theming your Angular Material app的建议：

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

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

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

Answer 1

我遇到了同样的问题，可以在here中找到一些讨论，还有一个处理该问题here的不起眼的博客。

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

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

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

但是由于起初我不清楚该怎么做，所以对于那些坚持使用它的人来说，这是一步一步来完成的事情：

创建一个包含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。

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

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

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

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

有了这个，我们的应用程序始终使用我们自定义的材质主题，但是因为主题定义（在theme部分中）与包含材质mixins（在{{1 }}），我们可以将my-theme部分安全地包含在任何组件中，而无需复制任何CSS。

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

theme

只需"build": { (...) "options": { (...) "stylePreprocessorOptions": { "includePaths": [ "src/assets/styles/partials" ] } } }到任何组件scss文件中，我们就可以访问所有变量和材料主题功能，例如mat-color：）

Answer 2

您现在应该拥有这个：

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

这就是我的理解。

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

2 个答案: