SassError: Undefined variable. Failing dependencies - node.js

Question

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.

Answer 1

Bootstrap v5.2 introduced a new file called _maps.scss. You must add it to your main Sass file.
Load your bootstrap modules in this order:
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/maps"; // **Newly added!**
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
#import "~bootstrap/scss/helpers";
#import "~bootstrap/scss/utilities/api";
The problem should be fixed now.

Answer 2

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.

Answer 3

You are kind of right, it's a bit strange that it happened without changing anything.
The reason of that is that yesterday a commit
took place on the main branch of twbs/
bootstrap, the v5.2.0 update.
The easy way to revert the changes is to follow #krenom advice.
Additionally, if you mind to install the v5.2.0 update please make sure to be advised about the new Sass file _maps.scss that comes with several Sasss maps from _variables.scss.
You can read more here.

Answer 4

There is a new _map.scss in v5.2.0. Don't have the details regarding your Webpack build but you probably just need to #import "~bootstrap/scss/maps"; (that's where $utilities-border-colors is defined) before #import "~bootstrap/scss/utilities";.

Answer 5

You can try to remove your node_modules directory and package-lock.json file. Then npm install.
And check if the error still append.
As #krenom say, it coulb be highter boostrap version dowloaded during the build. You can remove the ^ before the version in your package.json and reinstall your node_modules.

Answer 6

You need to define other 'sass' modules for Boostrap.
If you define as below, the problem is solved.
// Bootstrap initializaton
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/utilities";
#import "~bootstrap/scss/helpers";
#import "~bootstrap/scss/utilities/api";