Sidebar does not display correctly when using scoped css

Describe the bug

I need to use scoped css to avoid the bootstrap vue css ‘polluting’ the rest of the page. This is achieved using v-deep to ensure the styling is scoped correctly.

However this means that I cannot use a sidebar, as it does not render correctly. Removing scoping and it displays as expected.

Steps to reproduce the bug

Add bootstrap vue styling as follows: -

<style lang="scss" scoped>
::v-deep {
    @import '~bootstrap/scss/bootstrap.scss';

    /* Default body styles */
    margin: 0;
    font-family: $font-family-base;
    @include font-size($font-size-base);
    font-weight: $font-weight-base;
    line-height: $line-height-base;
    color: $body-color;
    text-align: left;
    background-color: $body-bg;

    @import '~bootstrap-vue/dist/bootstrap-vue.css';
}
</style>

And add a sidebar and it renders incorrectly.

Remove the scoping (incuding the v-deep): -

<style lang="scss">
    @import '~bootstrap/scss/bootstrap.scss';
    @import '~bootstrap-vue/dist/bootstrap-vue.css';
</style>

and the sidebar displays as expected.

Versions

Libraries:

• BootstrapVue: 2.15.0
• Vue: 2.6.1

[Hiws]

I fixed it. You need to use 3x ` for code blocks.

[Hiws]

Best bet would be to open up dev tools and see what’s going on by inspecting the sidebar elements.