Webpack build fails with "SassError: Undefined variable" when updating 5.1.3 -> 5.2.0

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When updating 5.1.3 -> 5.2.0 our webpack build fails with the following error:

error  in ./assets/scss/app.scss

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
  assets/scss/app.scss 14:9                           root stylesheet

That line just imports the utilities @import "~bootstrap/scss/utilities";

Reduced test cases

Don’t know how to provide a test case for this as we don`t even use that variable.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

5.2.0

[julien-deramond]

Thanks for reporting this issue @gndk. 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";.

[fun2life]

@turkic-dev: It is important to load the modules in the exact same order as in node_modules/bootstrap/scss/bootstrap.scss Also, the following modules must be loaded

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/helpers";
@import "~bootstrap/scss/utilities/api";