要点是--正如主题指南正确指出的--您不应该在整个项目中多次导入mixins、@include mat-core()和@include angular-material-theme($your-theme)。但是，当您在组件中使用SASS时，您通常希望引用主题变量和垫色调色板。将整个主题导入组件SASS中是很有诱惑力的，不小心重复了材料的混合。

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

主题对象的定义应该被分解成它自己的文件，与包含垫芯和角度材质主题混音的内容分开。

但由于最初我不清楚如何做到这一点，所以对于那些坚持这样做的人来说，这里是一步一步的：

创建一个包含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中，将我的主题文件声明为全局样式。

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

这样，我们的应用程序始终使用我们的自定义材料主题，但是由于主题定义(在theme部分中)与包含材料混合元素(在my-theme中)是分开的，所以我们可以安全地将我们的theme部分包含到任何组件中，而不会重复任何css。

可以选择地，通过将partials路径添加到stylePreprocessorOptions中的Angular.json中，可以简化主题分部的导入：

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

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

票数 21

Stack Overflow用户

发布于 2018-10-26 03:26:43

你现在应该这么做：

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