Error when upgrading from 4.5.3 to 5.1.3

[Joossensei]

Prerequisites

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

Describe the issue

I was upgrading the Bootstrap dependency for the open-source CMS I am working on and when I ran npm install bootstrap@latest this installed everything like it should. But when I tried to run npm run build I got an error saying SassError: $color: var(--background) is not a color. I looked into it and it seems this is something that breaks in node_modules/bootstrap/scss/_functions.scss.

Compiler error:

_functions.scss:

_variables.scss:

Reduced test cases

To test this you need to git clone the open-source CMS https://github.com/bolt/core and checkout to the bootstrap-upgrade-5.0 branch. Then run npm install && npm run build. Then see the errors

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

macOS

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

Chrome

What version of Bootstrap are you using?

v4.5.3 -> v5.1.3

[mdo]

Perhaps the same issue as #34693?

[Joossensei]

Does this mean it is a compiler issue? If so how can I work around it then without having to edit any of the functions?

[kaushikshukla]

do we have solution for this problem, because i have also faced similar problem while upgrading bootstrap from 4.5.3 to 5.2.3. When the error comes as variables as undefined.