SassError: Undefined variable. Failing dependencies

user_12467454 0
Viewed 3017

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.

package-lock.json angular node.js build
5 Answers

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.

user_143504560

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.

user_15852180

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.

user_129856570

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.

user_10752960

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";.

user_62122950
Related