Angular 2项目报错：引用不存在的CSS文件，但HTML页面未引入该文件

这种情况我之前也碰到过，明明自己没在HTML里手动引入目标CSS文件，却弹出“文件不存在”的报错，大概率是这些地方偷偷藏了引用，一步步排查试试：

• 检查组件元数据里的样式配置
  打开你使用的模板对应的组件.ts文件，看看@Component装饰器里的styleUrls或者styles数组。很多模板会在组件层面直接关联样式文件，比如：

  @Component({
    selector: 'app-template-component',
    templateUrl: './template.component.html',
    styleUrls: ['./template.component.css', './missing-css-file.css'] // 这里可能包含了报错的文件
  })
  

  如果发现数组里有那个不存在的CSS路径，要么把对应的文件补到指定位置，要么直接把这个无效路径删掉。

• 查看Angular全局样式配置文件
  如果你用的是Angular CLI，旧版本项目里找angular-cli.json，新版本找angular.json，打开后定位到styles数组。模板可能在全局配置里加了这个CSS的引用，比如：

  "styles": [
    "src/styles.css",
    "src/assets/css/missing-css-file.css" // 无效路径
  ]
  

  确认路径是否正确，文件是否存在，调整路径或者移除无效项即可。

• 检查已引入CSS文件中的@import语句
  有时候问题出在你已经引入的其他CSS文件里——某个CSS文件用@import导入了报错的文件，但这个文件并不存在。比如在styles.css里写了：

  @import './assets/css/missing-css-file.css';
  

  遍历所有你已经引入的CSS文件，找出这类无效的@import语句，修正路径或者删除它。

• 清理缓存后重新构建
  浏览器缓存或者Angular的构建缓存可能残留了旧的引用记录。先清理浏览器缓存（快捷键Ctrl+Shift+Delete），然后在项目根目录执行：

  ng clean # 清理构建缓存
  ng serve --open # 重新启动项目
  

  看看报错是否消失。

• 排查第三方依赖的样式引用
  如果模板依赖了第三方UI组件库，可能库的配置自动引入了某个样式文件，但你没正确安装依赖或者路径配置错了。先检查package.json里的依赖是否都安装完成（执行npm install确保依赖齐全），再确认组件库的样式导入路径是否符合官方要求。

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