角度材质主题：使用另一个scss文件中的主题定义对象答案

【问题标题】：angular material theming: consume the theme definition object in another scss file角度材质主题：使用另一个scss文件中的主题定义对象
【发布时间】：2018-02-25 07:57:52
【问题描述】：

我正在使用 @angular/material@2.0.0-beta.10 在 Angular 4.3.6 中编码

Angular Material Document 说

如果您想使用主题定义对象（例如， $candy-app-theme) 在其他 SCSS 文件中，然后定义主题对象应该被分解成它自己的文件，与包含 mat-core 和 angular-material-theme mixins。

如何存档？具体来说，我的顶级 scss 中有以下内容：

@import '~@angular/material/theming';
// Include non-theme styles for core.
@include mat-core();
$primary: mat-palette($mat-indigo, 400, 100, 900);

如何使 $primary 在其他 scss 文件中可用？

过去，我到处@include mat-core()。只是最近才注意到

这应该只包含在您的应用程序中一次。

应该怎么做才能在其他 scss 文件中 map-get($primary)？

【问题讨论】：

标签： angular angular-material2 theming

【解决方案1】：

我通过试验找到了答案。

只需按照信中的说明进行操作，不要做任何其他事情：不要将@includemat-core() 放在除最顶部 scss 之外的任何其他位置。

您可以多次@import 和~@angular/material/theming。在每个 scss 脚本中你需要 mat-palette 或 $mat-indigo, @import 再次。

// on other scss other than the root one, @import as usual
@import '~@angular/material/theming';
// @include mat-core(); but don't @include this again
$primary: mat-palette($mat-indigo, 400, 100, 900);

【讨论】：