Angular 5 Material自定义调色板编译失败求助

我来帮你复盘下自定义Angular Material调色板时最容易踩的几个坑，结合你遇到的“用标准调色板正常、自定义就报错”的情况，大概率是自定义调色板的结构或引用方式不符合框架要求：

常见错误点及修正方案 #

• 自定义调色板结构不完整
  Angular Material的调色板要求必须包含完整的色调层级（50、100…900、A100、A200、A400、A700），同时必须附带contrast子结构，用来定义对应色调下的文本对比度颜色。很多人会漏写contrast部分，或者某个色调的颜色值格式错误（比如少了#号、颜色值位数不对）。

  正确的自定义调色板写法示例：

  // 先定义完整的自定义调色板
  $my-custom-palette: (
    50: #f8f5e6,
    100: #f0e7b9,
    200: #e6d88a,
    300: #dcc95b,
    400: #d4be3a,
    500: #ccb318,
    600: #c2a915,
    700: #b89f12,
    800: #ae950f,
    900: #9e8309,
    A100: #fff8c2,
    A200: #fff290,
    A400: #ffeb5e,
    A700: #ffe63b,
    contrast: (
      50: $dark-primary-text,
      100: $dark-primary-text,
      200: $dark-primary-text,
      300: $dark-primary-text,
      400: $dark-primary-text,
      500: $light-primary-text,
      600: $light-primary-text,
      700: $light-primary-text,
      800: $light-primary-text,
      900: $light-primary-text,
      A100: $dark-primary-text,
      A200: $dark-primary-text,
      A400: $dark-primary-text,
      A700: $light-primary-text,
    )
  );
  
  // 再用mat-palette包装调色板
  $custom-primary: mat-palette($my-custom-palette);
  

• 变量引用顺序错误
  必须先定义好自定义调色板变量，再调用mat-palette函数去包装它。如果反过来先调用mat-palette再定义调色板，编译时会找不到变量，直接报错。

• 未正确导入Material主题依赖
  确保你的主题SCSS文件顶部已经导入了Angular Material的核心主题文件和mixins：

  @import '~@angular/material/theming';
  @include mat-core();
  

既然你已经通过@yurzui的帮助解决了问题，大概率是踩了上面某一个细节坑（比如漏写contrast、变量顺序搞反）。这类问题往往都是细节上的疏忽，对照标准格式排查就能快速解决~

内容的提问来源于stack exchange，提问作者Lucas Moura Veloso