missing css variables for modal element ^5.0.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

i’m using vue3 with vite. bootstrap is imported like this in main.ts:

import "bootstrap/scss/bootstrap.scss";

(gray values are undefined:)

Reduced test cases

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

Linux

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.0.2, v5.2.0

[mdo]

Yes, as mentioned above, all the variables for each component are on specific classes, on this case .modal. This is shown in our documentation for each component.

[adb-sh]

thanks for the help. just updated from bootstrap 4 to 5 and didn’t notice, that some variables got scoped in another way. as you have to set the .modal-class, which also sets display: none; you’ll have to overwrite it, when you’re using a js framework. f/e/ like this:

<div class="modal d-block">
  <div class="modal-dialog">...</div>
</div>

in Vue3 i’m doing smth like this for dynamic modals: