Angular 4中如何加载CSS？组件引入Bootstrap CSS编译失败求助

我之前在Angular 4项目里也踩过样式路径的坑，结合你的文件结构和尝试的情况，给你几个可行的方案：

方案1：全局引入Bootstrap（推荐） #

Angular CLI项目里，全局样式的管理更推荐通过配置文件统一引入，这样不用在每个组件里重复设置，还能避免组件样式封装带来的冲突。

找到根目录下的angular-cli.json文件（Angular 4版本用的是这个配置文件，后续版本改为angular.json），找到styles数组，把Bootstrap的路径加进去：

"styles": [
  "./css/bootstrap.min.css",
  "styles.css"
]

这里的路径是相对于angular-cli.json的，因为它在rootFolder下，所以./css/bootstrap.min.css正好指向你的Bootstrap文件。修改后重启开发服务器，样式就会全局生效了。

方案2：在组件中使用正确的相对路径 #

如果你确实需要在单个组件里引入，那得注意相对路径的层级：你的组件在rootFolder/app/xxx下，而Bootstrap在rootFolder/css下，所以从组件文件出发，需要先退两级目录才能到rootFolder，再进入css文件夹。

把组件的@Component装饰器里的styleUrls改成：

@Component({
  // 其他配置项
  styleUrls: ['../../css/bootstrap.min.css']
})

你之前尝试的../css/...只退了一级（到app文件夹），但css文件夹不在app目录下，所以路径错误，退两级就能正确定位到目标文件了。

额外检查项 #

• 确认文件名和路径的拼写：比如有没有把bootstrap.min.css写成bootstrap.css，或者大小写问题（Linux/macOS系统对文件名大小写敏感）。
• 检查Angular CLI版本：如果你的CLI版本较旧，可能对相对路径的解析有差异，可以尝试更新到对应Angular 4的稳定版本（比如Angular CLI 1.7.x）。

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