如何在Angular项目中使用Bootswatch？配置后仍显示默认Bootstrap主题如何解决？

1. 修正 angular.json 配置错误 #

你当前的配置存在两处明显错误：

• 缺少 node_modules 路径前缀，Angular 无法直接识别根目录外的依赖路径
• 语法格式错误：styles 属性的引号位置错误，数组末尾多余的句号也会导致配置解析异常
  修正后的配置如下：

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

2. 移除重复引入的原生 Bootstrap 样式 #

Bootswatch 主题文件已经内置完整的 Bootstrap 样式，不需要额外引入原生 Bootstrap 样式，否则会直接覆盖主题效果，请检查以下位置的引入代码并删除：

• angular.json 的 styles 数组中存在的 bootstrap/dist/css/bootstrap.min.css 等原生 Bootstrap 样式引入
• src/styles.css 或其他全局样式文件中的 @import "~bootstrap/dist/css/bootstrap.css" 等引入语句

3. 重启开发服务 #

angular.json 的配置修改不会触发热更新，需要手动终止当前运行的 ng serve 进程，重新执行启动命令后配置才会生效。

4. 强制清理浏览器缓存 #

如果重启后样式仍未生效，按 Ctrl + F5 强制刷新页面，清除浏览器缓存的旧样式文件即可。

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