bootstrap: 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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 20
Comments: 15 (2 by maintainers)

Commits related to this issue

Import the new map SCSS file before utilities See https://github.com/twbs/bootstrap/issues/36785#issuecomment-1189969247 for reference. The maps file is newly introduced in 5.2 and references a varia... — committed to sumocoders/FrameworkStylePackage by deleted user 2 years ago

Most upvoted comments

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

+167

julien-deramond on Jul 20, 2022

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

+48

fun2life on Jul 23, 2022

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

The problem was that I did not import ‘scss/maps’, ‘scss/helpers’ and ‘scss/utilities/api’ files

dasler-fw on Jul 25, 2022

So I understanded it wrong in this thread. But still adding the import @import “~bootstrap/scss/maps”; in node_modules/bootstrap/scss/_utilities.scss resolved the issue that was mentioned at the beginning. Anyway I got rid of bootstrap, I removed it in my project as it caused to much problems

BearCooder on Sep 9, 2022

@import “~bootstrap/scss/functions”; @import “~bootstrap/scss/variables”;

use of the ~ is bad practice. Unless you show as I always do, you will generate errors. Here is what I always use:

ex: @import “…/node_modules/bootstrap/scss/_variables.scss”;

I know there are little shortcuts available – but why?

wfd2018 on Jul 25, 2022

Hello, I have this problem, how can I solve it? @gndk @julien-deramond

https://github.com/svelte-add/svelte-add/issues/222

turkic-dev on Jul 22, 2022

@BearCooder You should not change anything in node_modules, ever. Add @import "~bootstrap/scss/maps"; to your own css instead.

tomrutgers on Sep 8, 2022

I know I can just add the import @import "~bootstrap/scss/maps"; in node_modules/bootstrap/scss/_utilities.scss and then it works but this is annoying as I need to repeat it everytime I do a fresh install with npm i. Will this be fixed?

BearCooder on Sep 2, 2022

Thanks for the quick reply @julien-deramond ! That did the trick 👍. I only looked at the patch notes in the GitHub release, so I completely missed that. Will remember to check the migration page more in the future 🙂

gndk on Jul 20, 2022