SassError: Undefined variable. Failing dependencies

I have a CI/CD pipeline for an Angular project which yesterday worked fine, but today the same code is returning several errors on the build:

./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss
- Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):         SassError: Undefined variable.
    ╷ 142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵   node_modules\bootstrap\scss\_utilities.scss 142:15  @import   src\styles.scss 7:9                                 root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_utilities.scss 142:15  @import
  src\styles.scss 7:9                                 root stylesheet
    at tryRunOrWebpackError (C:\User\user\project\node_modules\webpack\lib\HookWebpackError.js:88:9)
    at __webpack_require_module__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4936:18)
    at C:\User\user\project\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
    at done (C:\User\user\project\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\User\user\project\node_modules\tapable\lib\Hook.js:18:14)
    at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\User\user\project\node_modules\neo-async\async.js:3463:5)
    at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4879:16
    at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
    at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
    at Object.eachLimit (C:\User\user\project\node_modules\neo-async\async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
    ╷
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_utilities.scss 142:15  @import
  src\styles.scss 7:9                                 root stylesheet
    at Object.<anonymous> (C:\User\user\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\User\user\project\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\User\user\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\User\user\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\User\user\project\src\styles.scss:1:7)
    at C:\User\user\project\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
    at Hook.eval [as call] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\User\user\project\node_modules\tapable\lib\Hook.js:14:14)
    at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4981:39
    at tryRunOrWebpackError (C:\User\user\project\node_modules\webpack\lib\HookWebpackError.js:83:7)
    at __webpack_require_module__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4979:12)
    at __webpack_require__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4936:18)
    at C:\User\user\project\node_modules\webpack\lib\Compilation.js:5007:20
    at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
    at done (C:\User\user\project\node_modules\neo-async\async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\User\user\project\node_modules\tapable\lib\Hook.js:18:14)
    at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4914:43
    at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3482:9)
    at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)

Generated code for C:\User\user\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\User\user\project\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\User\user\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\User\user\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\User\user\project\src\styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n    ╷\n142 │       values: $utilities-border-colors\n    │               ^^^^^^^^^^^^^^^^^^^^^^^^\n    ╵\n  node_modules\\bootstrap\\scss\\_utilities.scss 142:15  @import\n  src\\styles.scss 7:9                                 root stylesheet");

I could reproduce it in local when I deleted the package-lock.json and generated one new.

This is my package.json

{
  "name": "app-name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "dev": "ng serve --host 0.0.0.0 -c dev",
    "debug": "ng serve --host 0.0.0.0 -c debug",
    "serve:es5": "ng serve --configuration es5 --host 0.0.0.0",
    "build:dev": "ng build --configuration=dev",
    "build:preprod": "ng build --configuration=preprod",
    "build:prod": "ng build --configuration=production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-architects/ddd": "^2.0.0",
    "@angular/animations": "^13.2.2",
    "@angular/cdk": "^13.2.2",
    "@angular/common": "^13.2.2",
    "@angular/compiler": "^13.2.2",
    "@angular/core": "^13.2.2",
    "@angular/forms": "^13.2.2",
    "@angular/localize": "^13.2.2",
    "@angular/material": "^13.2.2",
    "@angular/material-moment-adapter": "^13.2.2",
    "@angular/platform-browser": "^13.2.2",
    "@angular/platform-browser-dynamic": "^13.2.2",
    "@angular/router": "^13.2.2",
    "@babel/runtime": "^7.16.0",
    "@fortawesome/angular-fontawesome": "^0.10.0",
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.0.0",
    "@microsoft/applicationinsights-web": "^2.7.1",
    "@ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",
    "@ngrx/effects": "^13.0.2",
    "@ngrx/store": "^13.0.2",
    "@ngrx/store-devtools": "^13.0.2",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@popperjs/core": "^2.10.2",
    "@types/bootstrap": "^5.1.6",
    "@types/file-saver": "^2.0.3",
    "@types/jquery": "^3.5.8",
    "amplitude-js": "^8.17.0",
    "bootstrap": "^5.1.3",
    "bootstrap-icons": "^1.7.0",
    "chart.js": "^2.9.4",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.12",
    "dropzone": "^6.0.0-beta.2",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "intl-tel-input": "^17.0.13",
    "jquery": "^3.6.0",
    "moment": "^2.29.1",
    "ng-lottie": "git+https://github.com/Jrbebel/ng-lottie.git",
    "ng2-nouislider": "^1.8.3",
    "ngx-papaparse": "^5.0.0",
    "nouislider": "^12.0.0",
    "npm": "^8.11.0",
    "poeditor-ci": "^1.15.0",
    "pretty-checkbox": "^3.0.3",
    "rxjs": "^6.6.7",
    "tslib": "^2.0.0",
    "uuid": "^3.4.0",
    "xlsx": "^0.17.4",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.3",
    "@angular-eslint/builder": "^12.0.0",
    "@angular-eslint/eslint-plugin": "^12.0.0",
    "@angular-eslint/eslint-plugin-template": "^12.0.0",
    "@angular-eslint/schematics": "^13.1.0",
    "@angular-eslint/template-parser": "^12.0.0",
    "@angular/cli": "^13.2.3",
    "@angular/compiler-cli": "^13.0.0",
    "@angular/language-service": "^13.2.2",
    "@types/chart.js": "^2.9.34",
    "@types/node": "^12.20.45",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "codelyzer": "^6.0.0",
    "eslint": "^7.26.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "4.5.5"
  }
}

I don't even use the $utilities-border-colors variables and aren't present in my code.

My node version is 16.16 My npm version is 8.14.0

Could be that I have to update any of the dependencies, and why if I didn't change anything, it just doesn't work now?

Thanks in advance.

As it's said in the comments by Krenom, removing the ^ from the Bootstrap import fixed the issue.

Thanks for the responses and all the info.

I'll be greedy and slap it as an answer so that it can be accepted and one is available for those that follow.

The dangers of using ^ style versioning. Any one of those things might have been installed as a slightly different version that now breaks something. Bootstrap, at a guess given the error message and a new version was pushed out yesterday according to npm. Start with that and lock it down to a specific version (maybe just 5.1.3 for now, so just remove the ^) and see if that builds again.