Reopened: Missing $primary-text-emphasis-dark variable

[Michael-Ziluck]

Clarification from original issue #38683

The original ticket was closed by @mdo with the following explanation:

Closing as this isn't a breaking change—minor releases can include new features. This has always been the case in Bootstrap.

There seems to be a misunderstanding on what "breaking change" means. It should mean: "if you update this library to a new version, all usages of said library should continue to compile."

Before version 5.3.0, the following code compiles:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/breakpoints";

After version 5.3.0, the aforementioned code throws the following error:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
   ╷
55 │     "primary": $primary-text-emphasis-dark,
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  bootstrap\scss\_maps.scss 55:16  @import
  src\styles.scss 19:9             root stylesheet

If you disagree, can you please explain how you and the rest of the Bootstrap team interprets the phrase "breaking change"?

Original issue

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

The problem is your update a minor version (5.2.3 -> 5.3.0) and have a very little Breaking Change

variable $primary-text-emphasis-dark not exist on 5.2.3 and is required on 5.3.0

SassError: Undefined variable.
   ╷
55 │     "primary": $primary-text-emphasis-dark,
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/bootstrap/scss/_maps.scss 55:16  @import
  src/styles.scss 9:9                           root stylesheet

The fix is very easy to implement, just need include the new file variables-dark on main styles

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
 ...
@import "../node_modules/bootstrap/scss/maps";

Some automated process may throw an error, because it's a minor update and it should be backwards compatible.

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

Windows

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

Chrome

What version of Bootstrap are you using?

5.3.0

[glitchwizard]

Here to back this up as a breaking change

[neonexus]

^

[tgm-git]

I have encountered this issue as well, however there are several other issues when upgrading from 5.2.X to 5.3.X. The change should have been marked major, not minor.

[javatlacati]

did you tried adding the following??

@import "../node_modules/bootstrap/scss/variables-dark";

[Michael-Ziluck]

did you tried adding the following??

@import "../node_modules/bootstrap/scss/variables-dark";

While that exact solution did not work for me, there are other solutions. However, there are two issues here:

1. If we are not using dark mode, we should not be required to import dark mode to access Bootstrap's other variables
2. This was introduced on a minor version change which is breaking and violates semver

[julien-deramond]

Suggested a patch tackling this issue via #39380. Please test it in your projects to double-check that it fixes well the issue on your side and that it doesn't cause any unexpected side effects 🙏

[neonexus]

I appreciate that you have taken the time to put this together! I will do a third-person review here soon as I get home.