如何在非Angular页面中复用Angular Material的Material Design类？

我刚好遇到过类似的场景，给你几个可行的办法，帮你在静态/非Angular页面里复用Angular Material的样式和主题：

1. 直接复用Angular项目构建后的CSS文件 #

这是最快的方式，因为你的Angular项目已经编译好了包含所有Material样式和自定义主题的CSS：

• 先在你的Angular项目里执行ng build（生产环境构建可以加--prod来压缩文件）
• 去构建生成的dist文件夹里找编译后的样式文件，通常是styles.[一串哈希值].css，这个文件已经包含了你配置的Material主题和所有基础样式类
• 把这个文件复制到非Angular页面的静态资源目录，然后在页面的<head>里引入：

  <link rel="stylesheet" href="/path/to/your/compiled-material-styles.css">
  

这样就能直接在非Angular页面里用mat-card、mat-button、mat-headline这些类了。

2. 单独编译Angular Material的SCSS源文件 #

如果不想用构建后的整个文件，或者需要自定义要包含的样式模块，可以单独编译SCSS：

• 先确保你本地有Sass编译器（可以用npm install -g sass安装dart-sass）
• 创建一个新的SCSS文件，比如material-static-styles.scss，然后写入和你Angular项目一致的主题配置，再导入必要的Material样式：

  // 导入Angular Material的主题基础文件
  @import '@angular/material/theming';
  
  // 复制你Angular项目里的主题配置（保持一致才能统一风格）
  $app-primary: mat-palette($mat-blue);
  $app-accent: mat-palette($mat-orange, A200, A100, A400);
  $app-warn: mat-palette($mat-red);
  $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
  
  // 应用主题到所有Material组件样式
  @include angular-material-theme($app-theme);
  // 导入核心基础样式（比如布局、排版类）
  @include mat-core();
  

• 用Sass编译这个文件：sass material-static-styles.scss material-static-styles.css
• 把编译好的CSS引入非Angular页面即可。

3. 按需引入特定组件的样式 #

如果只需要用部分Material类（比如只需要按钮和卡片样式），可以在SCSS里只导入对应的模块，减少CSS体积：

// 主题配置同上...
@include mat-button-theme($app-theme);
@include mat-card-theme($app-theme);
@include mat-typography-theme($app-theme); // 排版类

小提示 #

• Angular Material的类名基本和组件名对应，比如MatButton对应mat-button，MatCard对应mat-card，这些在Angular Material的组件文档里都能找到，不用专门找CSS文档
• 有些样式类需要配合特定的DOM结构使用，比如mat-form-field需要包裹input和mat-label，你可以参考Angular组件的HTML结构来写非Angular页面的代码

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