如何预渲染自定义Angular Material主题以通过CDN分发？

1. 创建自定义主题SCSS文件 #

在Angular项目的src/目录下新建custom-material-theme.scss文件，编写主题定制逻辑：

// 导入Angular Material主题基础依赖
@import '~@angular/material/theming';

// 初始化Angular Material核心样式
@include mat-core();

// 定义自定义调色板（可按需调整色值与色调）
$custom-primary: mat-palette($mat-indigo, 600);
$custom-accent: mat-palette($mat-pink, A200);
$custom-warn: mat-palette($mat-red);

// 生成并应用浅色主题
$custom-light-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);
@include angular-material-theme($custom-light-theme);

// 可选：添加深色主题，通过类名控制切换
.dark-theme {
  $custom-dark-theme: mat-dark-theme($custom-primary, $custom-accent, $custom-warn);
  @include angular-material-theme($custom-dark-theme);
}

2. 配置Angular CLI编译独立CSS文件 #

修改项目根目录的angular.json，在architect.build.options.styles数组中添加自定义主题的编译配置，让CLI将其输出为独立文件：

"styles": [
  // 保留原有项目全局样式（若存在）
  "src/styles.scss",
  {
    "input": "src/custom-material-theme.scss",
    "bundleName": "custom-material-theme",
    "inject": false
  }
]

• bundleName：指定编译后输出的CSS文件名
• inject: false：禁止CLI自动将该CSS注入到index.html，方便后续单独提取分发

3. 编译生成优化后的静态CSS #

运行生产环境编译命令，生成压缩优化后的主题CSS文件：

ng build --configuration production

编译完成后，可在dist/[项目名称]/目录下找到custom-material-theme.css（若开启源映射，还会生成对应的.css.map文件）。

4. 上传至CDN服务 #

将生成的custom-material-theme.css文件上传到你的CDN服务商（如各类云厂商的对象存储+CDN加速服务），获取该文件的公开访问URL。

5. 在目标项目中引入CDN主题 #

在需要应用该主题的前端项目index.html的<head>标签中，通过<link>引入CDN上的主题文件：

<head>
  <!-- 其他资源引入 -->
  <link rel="stylesheet" href="https://你的CDN域名/custom-material-theme.css">
</head>

若包含深色主题，只需在根元素（如<body>）上添加dark-theme类即可切换：

<body class="dark-theme">
  <!-- 页面内容 -->
</body>

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