ng-bootstrap Offcanvas显示异常问题排查与原因求助

架构老林

2026-7-28

问题分析与排查方向

你遇到的Offcanvas默认样式缺失问题，大概率是以下几个原因导致的，逐个排查试试：

Bootstrap样式未正确导入
Ng-bootstrap完全依赖Bootstrap的基础样式，要是没在项目全局样式文件（比如styles.scss）里导入Bootstrap的SCSS或CSS，Offcanvas的核心样式（包括visibility: visible这类控制显示的属性）就不会被加载。
检查下styles.scss里有没有这行：
```
@import "bootstrap/scss/bootstrap";
```
要是用CSS文件，就改成对应路径的导入语句。
依赖版本不兼容
你的@angular/cdk是13.3.2，但Angular核心版本是14.2.12，版本不匹配可能触发样式打包异常。Ng-bootstrap 13.x确实适配Angular 14，但CDK版本最好和Angular核心版本保持一致，把CDK升级到14.x版本试试：
```
npm install @angular/cdk@^14.2.12
```
Angular CLI样式配置遗漏
打开angular.json，检查architect.build.options.styles数组里有没有包含Bootstrap的样式文件。正常应该有类似这样的配置：
```
"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/styles.scss"
]
```
没加的话添上，再重新构建项目。
本地缓存干扰
本地的Node_modules缓存或者Angular构建缓存可能导致样式没被正确更新。执行以下命令清理缓存后重新安装依赖：
```
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
ng build --clean
```
隐性样式覆盖
就算你说没有自定义SCSS干扰，也可能有其他第三方库（比如全局样式重置工具）的样式无意中覆盖了Offcanvas的默认属性。可以打开浏览器开发者工具，选中Offcanvas元素，查看visibility属性的来源，确认是不是被其他样式规则覆盖了。