SCSS loading of bootstrap-vue-next not fully working

[sebastian-raubach]

Describe the bug

I'm currently trying to migrate from bootstrap-vue with Vue2 to bootstrap-vue-next with Vue3. So far most things are working fine, but I'm running into issues with loading bootstrap-vue-next via SASS/SCSS so I can modify some variables and also load Bootswatch.

One of the issues I run into, is that BModals don't show up.

It works fine if I load bootstrap-vue-next's css from main.js using these two lines:

import 'bootstrap-styles/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'

The modal opens up just fine loading it like this. However, when I load it from a <script lang="scss"> tag from App.vue it doesn't show up. I load it using these lines:

<style lang="scss">
$primary: #3498db;

@import '~bootswatch/dist/cosmo/variables';
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue-next/src/styles/styles.scss';
@import '~bootswatch/dist/cosmo/bootswatch';
</style>

This used to work just fine for bootstrap-vue and Vue2, but then the scss file was @import '~bootstrap-vue/src/index.scss';

Is this no longer how I can define my own values for bootstrap variables and use Bootswatch at the same time? Many thanks.

Reproduction

https://stackblitz.com/edit/github-fn9sqd?file=src%2FApp.vue,package.json,vite.config.mts,src%2Fcomponents%2FComp.vue,src%2Fmain.ts

Used Package Manager

npm

Validations

• [X] Have tested with the latest version. This is still alpha version and sometime things change rapidly.
• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• github-fn9sqd (Open reproduction)

[xvaara]

BModal has scoped styles, that aren't included in the scss. add these to your style for now:

.modal.show {
  display: block;
}
.modal-dialog {
  z-index: 1051;
}

@VividLemon Do you know why we have so many styles in our scss? For what reason they are there and do we need them? Also our modal uses b-overlay weirdness and not modal-backdrop from bootstrap, is there a reason for this?

[VividLemon]

@VividLemon Do you know why we have so many styles in our scss? For what reason they are there and do we need them?

I dont remember why theyre not inlined. Could be no reason idk

Also our modal uses b-overlay weirdness and not modal-backdrop from bootstrap, is there a reason for this?

Seemed more user friendly to use BOverlay. That way one could modify the props to make a more fine grained background. Whether or not it would ever be used, idk, but seemed like there was no reason not to

[sebastian-raubach]

Is this something that you think will only affect BModal or am I likely to run into other scenarios where scoped styles aren't included in the scss and therefore won't work with the setup I have?

[xvaara]

Seemed more user friendly to use BOverlay. That way one could modify the props to make a more fine grained background. Whether or not it would ever be used, idk, but seemed like there was no reason not to

I'd find this confusing since then css vars would not work (--bs-backdrop-*) on modal.

[xvaara]

@sebastian-raubach seems like BAlert and BFormFile are only others that have scoped styles.

[Morgul]

Seemed more user friendly to use BOverlay. That way one could modify the props to make a more fine grained background. Whether or not it would ever be used, idk, but seemed like there was no reason not to

I'd find this confusing since then css vars would not work (--bs-backdrop-*) on modal.

Yeah, when it comes to theming I would expect to be able to theme the modal just like it was raw bootstrap. Finding out it's a BOverlay under the hood would (and did) surprise me.

[VividLemon]

it's a BOverlay under the hood would (and did) surprise me

Remove it. Idrc. Probably not much utility to it. The only use I can see is adding a background blur for a modal. But it's whatever.

[xvaara]

Maybe we could add backdrop prop that adds the class to boverlay and have "both". I'll investigate when I have time.

[VividLemon]

For simplicity id rather just stick to the default. Again, i dont see much use in having red backdrops and whatnot. Maybe adjust the blur, but thats about it. And that doesnt seem to be enough to justify its existence

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed

[blaaat]

BModal has scoped styles, that aren't included in the scss. add these to your style for now:

.modal.show {
  display: block;
}
.modal-dialog {
  z-index: 1051;
}

@VividLemon Do you know why we have so many styles in our scss? For what reason they are there and do we need them? Also our modal uses b-overlay weirdness and not modal-backdrop from bootstrap, is there a reason for this?

This shows the modal, but without the fade effect.

The code that is scoped:

.modal {
    display: block;
}

.modal-dialog {
    z-index: 1051;
}

which works a bit better!

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. It will not be auto-closed