Angular 18配置Material主题遇问题：无样式更新+主题缺失警告

一、修复CLI提示更新styles.scss但无修改痕迹的问题 #

Angular 18添加Material时，默认会将主题配置写入angular.json而非直接修改styles.scss，按以下步骤检查：

• 打开angular.json，定位到项目节点下的build -> options -> styles数组
• 确认是否已包含Azure-Blue预构建主题路径：

  "styles": [
    "@angular/material/prebuilt-themes/azure-blue.css",
    "src/styles.scss"
  ]
  

  若已存在，CLI提示属于冗余信息；若不存在，手动添加该行即可（Angular 18支持直接引用node_modules下的包路径，无需写相对路径）。

二、解决"找不到Angular Material核心主题"的警告 #

方案1：用预构建主题快速解决 #

1. 确保angular.json的styles配置符合上述要求
2. 删除styles.scss中手动添加的@import语句，避免路径错误或重复加载
3. 重启开发服务器：

   ng serve --open
   

方案2：自定义Azure-Blue主题（进阶） #

如果需要调整主题细节，按以下步骤操作：

1. 在src/styles.scss中写入自定义主题代码：

   // 导入Material主题核心工具
   @use '@angular/material' as mat;
   
   // 基于Azure-Blue调色板定义主题变量
   $azure-blue-primary: mat.define-palette(mat.$azure-blue-palette);
   $azure-blue-accent: mat.define-palette(mat.$azure-blue-palette, A200, A100, A400);
   $azure-blue-warn: mat.define-palette(mat.$red-palette);
   
   // 构建完整的浅色主题
   $azure-blue-theme: mat.define-light-theme((
     color: (
       primary: $azure-blue-primary,
       accent: $azure-blue-accent,
       warn: $azure-blue-warn,
     )
   ));
   
   // 将主题应用到所有Material组件
   @include mat.all-component-themes($azure-blue-theme);
   

2. 修改angular.json的styles数组，只保留自定义样式文件：

   "styles": [
     "src/styles.scss"
   ]
   

3. 清理缓存并重启服务器：

   ng cache clean
   ng serve
   

三、额外排查点 #

• 执行ng update @angular/material，确保Material版本与Angular 18完全兼容
• 若使用独立组件，需在组件的imports数组中添加MatCommonModule，确保主题样式能作用到组件
• 打开浏览器开发者工具的网络面板，筛选CSS资源，检查主题文件是否存在404加载错误

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