升级NG-Bootstrap 15与Bootstrap5后Bootstrap变量未定义问题

以下是针对升级后遇到的变量未定义问题的排查和解决步骤：

• 组件样式中需显式导入Bootstrap变量
  Angular组件样式默认是隔离的，全局styles.scss中导入的Bootstrap变量不会自动传递到组件SCSS文件里。如果要在组件中使用变量，需要在对应组件的.component.scss顶部导入Bootstrap变量文件或全局样式文件：

  // 直接导入Bootstrap变量
  @import "../node_modules/bootstrap/scss/variables";
  // 或者导入已包含Bootstrap的全局styles.scss（路径根据项目结构调整）
  @import "../../styles";
  

  Bootstrap 5的变量带有!default标记，重复导入不会引发冲突，只会确保组件能获取到变量值。

• 确认全局样式的导入顺序
  如果你需要自定义Bootstrap变量，必须在导入Bootstrap核心SCSS之前定义变量，否则默认值会覆盖你的自定义值。比如在styles.scss中：

  // 先定义自定义变量
  $primary: #2563eb;
  $secondary: #6b7280;
  // 再导入Bootstrap完整SCSS
  @import "bootstrap/scss/bootstrap";
  

  同时检查angular.json的build.options.styles配置，确保只引入src/styles.scss，不要直接引入Bootstrap的CSS文件，否则SCSS变量无法生效。

• 不要尝试从JS/TS中直接访问SCSS变量
  Bootstrap的SCSS变量不会暴露到浏览器的JavaScript全局环境中，如果你需要在代码逻辑中使用这些变量值，需要先把变量导出为CSS自定义属性（CSS变量）：
  在styles.scss中添加：

  :root {
    --bs-primary: #{$primary};
    --bs-secondary: #{$secondary};
    // 按需导出其他需要的变量
  }
  

  之后在组件中通过以下方式获取：

  const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--bs-primary').trim();
  

• 验证NG-Bootstrap配置
  确认app.module.ts中已正确导入NgbModule：

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
    imports: [
      // 其他模块
      NgbModule
    ]
  })
  export class AppModule { }
  

  NG-Bootstrap v15已集成Popper，无需手动引入Popper的CSS或JS文件，避免版本冲突导致的异常。

• 清理缓存并重新构建
  Angular的构建缓存可能导致样式未更新，执行以下命令清理缓存并重新构建：

  ng clean
  ng build
  

  开发模式下可以重启服务并禁用缓存：

  ng serve --no-cache
  

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