如何在Nx工作区添加Angular Material并实现全应用库主题统一

• 第一步：安装全域依赖
  在工作区根目录执行命令，将 Angular Material 相关依赖安装到工作区全局：
  npm install @angular/material @angular/cdk @angular/animations
  不要在子应用/子库目录单独执行ng add @angular/material，避免生成重复的冗余配置。
• 第二步：创建全局主题文件
  在工作区根目录新建styles文件夹，新增material-theme.scss作为全局统一主题配置文件，写入自定义主题规则，示例代码如下：

@use '@angular/material' as mat;
@include mat.core();

// 自定义调色板
$app-primary: mat.define-palette(mat.$indigo-palette);
$app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$app-warn: mat.define-palette(mat.$red-palette);

$app-theme: mat.define-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
    warn: $app-warn,
  )
));

// 应用 Angular Material 组件全局主题
@include mat.all-component-themes($app-theme);

// 后续自定义库组件的主题mixin统一在此处调用，示例：
// @include header-component-theme($app-theme);

• 第三步：配置全局样式继承
  可以选择两种方式实现所有应用自动加载全局主题：

1. Nx 全域配置（推荐）：在根目录nx.json的targetDefaults.build.options.styles数组中添加主题文件路径，所有应用的构建配置会自动继承：
   "styles": ["{workspaceRoot}/styles/material-theme.scss"]
2. 单独配置每个应用：在每个子应用的project.json的build.options.styles数组中添加主题文件的相对路径即可。

• 第四步：适配 libs 目录下的自定义组件

1. 在每个子库的project.json中，给build、test等目标添加样式预处理器路径配置，示例：

"stylePreprocessorOptions": {
  "includePaths": ["{workspaceRoot}/styles"]
}

配置完成后，子库组件的样式文件可以直接导入全局主题文件使用变量、混入，无需写长路径：@use 'material-theme' as *;
2. 自定义组件需要适配主题的，统一封装主题混入，比如HeaderComponent对应的样式文件中封装：

@mixin header-component-theme($theme) {
  $primary: map-get($theme, primary);
  .header {
    background-color: mat.get-color-from-palette($primary);
  }
}

将该混入引入到全局material-theme.scss中调用，即可让组件样式跟随全局主题生效。

• 第五步：统一 Material 模块导出（可选优化）
  可以在libs下新建一个共用的 UI 库，专门导出所有项目需要用到的 Angular Material 模块，所有子应用、子库需要使用 Material 组件时直接导入该共用模块即可，避免重复导入模块代码。

内容的提问来源于stack exchange，提问作者Motassem Jalal