Angular 6导入主题CSS仍提示找不到Material核心主题错误求助

我之前也踩过这个坑，给你几个实用的排查和解决方向：

• 换用更可靠的导入路径
  你现在在app.component.css里用的相对路径../../node_modules/...很容易因为项目结构变化失效。试试用Angular CLI支持的绝对路径写法，直接指向node_modules：

  @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
  

  这里的~是CLI的特殊标识，会自动去node_modules目录查找资源，比相对路径稳定得多。

• 把主题导入到全局样式文件
  Angular Material官方推荐将主题导入到全局样式文件（比如项目根目录的styles.css/styles.scss），而不是单个组件的样式文件。组件样式是有作用域限制的，可能无法让所有Material组件都识别到主题，这也是常见的报错原因。

• 校验版本兼容性
  Angular 6对应的@angular/material版本必须是6.x系列，版本不匹配会导致主题加载异常。你可以在终端运行下面的命令查看当前版本：

  npm list @angular/material
  

  如果版本不对，重新安装适配Angular 6的版本：

  npm install @angular/material@6.4.7 --save
  

• 清理缓存重启项目
  有时候CLI的缓存会干扰资源加载，试试先清缓存再重启项目：

  ng cache clean --all
  ng serve --open
  

额外提醒：如果你的项目用的是SCSS样式文件，导入语句不需要修改，只需要确保全局样式文件的后缀是.scss即可。

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