升级Angular 4至Angular 5后Bootstrap CSS样式失效求助

这种升级后样式突然丢失的情况我之前也碰到过，大概率是Angular升级过程中Bootstrap的引用配置出了问题，咱们一步步来排查和修复：

1. 检查Angular配置文件的样式引用 #

首先确认angular.json（升级前可能是.angular-cli.json）里的styles数组有没有正确引入Bootstrap的CSS文件：

• 如果是通过npm安装的Bootstrap，配置应该类似这样：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

• 要是用的本地Bootstrap文件，得仔细核对路径是否正确，比如src/assets/css/bootstrap.css，路径写错就会导致文件加载失败。

2. 验证Bootstrap依赖是否正常 #

升级Angular时可能会影响npm依赖，先检查Bootstrap是否被正确安装：

• 在项目根目录的终端执行：

npm list bootstrap

如果提示找不到包，就重新安装和Angular5兼容的Bootstrap版本（比如Bootstrap 4.x完全适配）：

npm install bootstrap@4 --save

3. 检查index.html中的手动引用（如果存在） #

有些项目会直接在src/index.html里用<link>标签引入Bootstrap，升级后可能因为路径变化或缓存问题失效：

• 打开index.html，查看是否有类似标签：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

这种情况建议改成通过angular.json配置引入，或者确认路径无误后，强制刷新浏览器缓存（Ctrl+Shift+R）试试。

4. 排查样式冲突或覆盖问题 #

有时候不是没加载，而是升级后Angular的样式封装或自定义样式把Bootstrap覆盖了：

• 打开浏览器开发者工具（F12），在Elements面板选中一个本该有Bootstrap样式的元素（比如按钮），查看Styles面板里是否存在.btn这类Bootstrap类的样式规则。
• 找不到规则说明确实没加载；如果找到了但被其他样式覆盖，就需要调整样式优先级。

5. 清理缓存并重新构建 #

Angular的缓存偶尔会引发奇怪的问题，试试清理后重新构建项目：

ng clean
ng build --prod

重新启动项目后看看样式是否恢复正常。

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