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", "buildreprod": "ng build --configuration=preprod", "buildrod": "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. Continue reading...
