Angular 15中Bootstrap样式无法加载问题求助

你的配置代码存在路径问题，同时可从以下几个方向排查修复：

1. 修正angular.json中的路径 #

angular.json位于项目根目录，node_modules同样在根目录下，路径无需../，正确配置如下：

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/popper.js/dist/popper.js",
  "./node_modules/bootstrap/dist/js/bootstrap.js"
]

2. 重启Angular开发服务器 #

修改angular.json后，必须停止当前ng serve进程，重新运行ng serve才能让新配置生效。

3. 检查依赖版本兼容性 #

• 若安装的是Bootstrap 5：无需jQuery，且Popper依赖应为@popperjs/core而非旧版popper.js。卸载旧依赖，重新安装：

  npm uninstall jquery popper.js
  npm install @popperjs/core bootstrap
  

  对应scripts配置改为：

  "scripts": [
    "./node_modules/@popperjs/core/dist/umd/popper.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]
  

• 若安装的是Bootstrap 4：确保jquery（>=1.9.1）和popper.js（>=1.12.9）的版本符合Bootstrap 4的要求。

4. 排查样式覆盖问题 #

暂时注释src/styles.css中的所有自定义样式，重新运行项目，观察Bootstrap样式是否生效。若生效，说明自定义样式中有代码覆盖了Bootstrap样式。

5. 直接在styles.css中导入Bootstrap #

如果angular.json配置始终不生效，可尝试在src/styles.css顶部添加导入语句：

@import "./node_modules/bootstrap/dist/css/bootstrap.css";

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