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

[gndk]

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

[gndk]

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 🙂

[turkic-dev]

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

svelte-add/svelte-add#222

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

[wfd2018]

@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?

[julien-deramond]

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

svelte-add/svelte-add#222

FYI it's been solved in svelte-add/svelte-add#222 (comment)

[dasler-fw]

@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

[ahmadasjad]

Event fails after adding the map.scss in react project
#36851 (comment)

[omarnaitup]

Hello,

That's the same with parceljs, same solution #36785 (comment)

Thanks,

Omar

[BearCooder]

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?

[tomrutgers]

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

[BearCooder]

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

[featuriz]

Check the Doc at: https://getbootstrap.com/docs/5.2/customize/sass/#importing
Download: https://getbootstrap.com/docs/5.2/getting-started/download/#source-files
From the file: bootstrap-5.2.2/scss/bootstrap.scss
Copy from // scss-docs-start import-stack
Copy to // scss-docs-end import-stack
to your new scss main file and set all the @import ""; to correct path.
Ex:
@import "functions"; -> @import "../../../../../themes/contrib/bootstrap5/dist/bootstrap/5.2.2/scss/functions";

Note:- Comment all unnecessary functionality that you are not using. So that your compiled file will be as small as possible.

[chowais181]

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?

yes it's also work for me

[sureshtakeda]

In the _utilities.css, you can import the maps.

@import "maps";