Jenkins Pipeline构建Angular应用失败：Sass变量未定义报错

错误详情 #

- Generating browser application bundles...
✔ Browser application bundle generation complete.

Error: ./src/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
114 │       @each $key, $value in $gutters {
    │                             ^^^^^^^^
    ╵
  node_modules/bootstrap/scss/mixins/_grid.scss 114:29       @content
  node_modules/bootstrap/scss/mixins/_breakpoints.scss 68:5  media-breakpoint-up()
  node_modules/bootstrap/scss/mixins/_grid.scss 72:5         make-grid-columns()
  node_modules/bootstrap/scss/_grid.scss 32:3                @import
  src/styles/vendors/_bootstrap.scss 7:9                     @import
  src/styles/vendors/_vendors.scss 4:9                       @import
  src/styles/main.scss 7:9                                   root stylesheet

解决方案 #

• 修正Bootstrap导入顺序
  错误根源是导入_grid.scss时，依赖的$gutters变量未被定义。Bootstrap的核心变量都在_variables.scss中，按需导入组件时必须先导入变量文件，再导入目标组件。修改src/styles/vendors/_bootstrap.scss：

  // 先导入Bootstrap核心变量
  @import "../../../node_modules/bootstrap/scss/variables";
  // 再导入需要的组件（如grid）
  @import "../../../node_modules/bootstrap/scss/grid";
  

  若你自定义了Bootstrap变量，需将自定义变量文件放在Bootstrap变量文件之前导入，实现默认值覆盖。

• 保证依赖导入完整性
  手动拆分导入Bootstrap组件时，必须严格遵循依赖链：先导入variables、mixins，再导入其他功能组件。嫌麻烦的话直接导入完整Bootstrap主文件，避免依赖缺失：

  @import "../../../node_modules/bootstrap/scss/bootstrap";
  

• 同步Jenkins与本地依赖环境
  本地构建正常但Jenkins失败，大概率是依赖版本不一致。在Jenkins Pipeline中添加以下步骤：

  rm -rf node_modules package-lock.json
  npm ci
  

  npm ci会严格按照package-lock.json安装依赖，确保Jenkins环境与本地完全一致。

• 检查Sass相关依赖兼容性
  确认sass-loader、sass（dart-sass）版本与Angular版本匹配。Angular 12+不再支持node-sass，必须使用sass包，可执行以下命令调整：

  npm uninstall node-sass
  npm install sass --save-dev
  

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