升级Angular Material15后样式丢失且找不到@angular/material/theming

核心关联说明 #

找不到@angular/material/theming文件和样式错乱直接相关——Angular Material的组件样式、主题依赖该文件提供的Sass混合器与变量，缺失或引用错误会导致默认样式加载失败，出现按钮错位、字体变更、Div偏移等问题。该文件未被重命名，Angular Material 15中仍保持@angular/material/theming的路径。

解决步骤 #

1. 确认依赖安装完整性 #

• 删除本地依赖缓存与锁定文件，重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 检查package.json中@angular/material版本为15.x，确保与Angular核心框架版本完全匹配（Angular 15必须对应Material 15）。

2. 修正主题引用与配置 #

• SCSS项目：在src/styles.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,
    ),
  ));
  
  // 全局应用主题到所有Material组件
  @include mat.all-component-themes($app-theme);
  

• CSS项目：在angular.json的styles数组中添加Material预构建主题：

  "styles": [
    "@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.css"
  ]
  

3. 修复CLI命令执行后的配置异常 #

• ng add @angular/material未自动生成主题配置时，手动创建src/theme.scss并引入到styles.scss中：

  @import './theme';
  

• 执行ng update @angular/material --force后，检查angular.json中styles、scripts配置项，确保未丢失Material相关引用。

4. 清除缓存并重启服务 #

• 清除Angular构建缓存：

  ng cache clean
  

• 重启开发服务器：

  ng serve --open
  

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