css variables for breakpoints are missing in Bootstrap 5

[shaack]

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

While BS 4 has the breakpoints like --breakpoint-sm: 576px; defined as css variables, these are missing in BS 5.

Although this should be present according to the documentation: "[...]we include our grid breakpoints as CSS variables (except for xs) [...]"

• I already fixed it and created a pull request: Added css variables for breakpoints #36095
• I need this fix for my breakpoint detection script to work https://github.com/shaack/bootstrap-detect-breakpoint

Quickfix (and main part of my pull request)

Add this to your scss

:root {
  @each $name, $value in $grid-breakpoints {
    --bs-breakpoint-#{$name}: #{$value};
  }
}

Reduced test cases

On top of /dist/css/bootstrap.css the css variables are defined. You can see that no variables are defined for the breakpoints.

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

All OS

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

All Browsers

What version of Bootstrap are you using?

v5.1.0

[shaack]

Duplicate for #36081
Will close this now.