如何在不复制mixin的情况下将自定义材质主题包含到组件中:mat core和angular material主题

我遇到了同样的问题,有些讨论可以找到 here ,以及一个处理这个问题的有见地的博客 here .

关键是——正如主题指南正确指出的那样——你不应该导入mixin @include mat-core() 和 @include angular-material-theme($your-theme) 在整个项目中不止一次。但是,当您在组件中使用SASS时,通常需要引用主题变量和mat调色板。很容易将整个主题导入组件SASS,意外地复制了材质mixins。

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

但由于我最初不清楚如何做到这一点,这里有一个步骤供任何人坚持同样的:

1. 创建 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

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中,将“我的主题”文件声明为“样式”下的全局文件

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

有了这个,我们的应用程序始终使用我们的自定义材质主题,但是因为 定义 theme 部分)与材料混合物(在 my-theme 主题 在不复制任何css的情况下对任何组件进行部分处理。

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

简单 @import 'theme' 在任何组件scss文件中,我们都可以访问所有变量和材质主题函数,例如mat color:)

你现在应该有这个:

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