Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with scoped scss in a vue tempate

See original GitHub issue

Issue description

Scoped scss is not applying when its defined in vue template. Please refer to the code snippet below:

<template>
  <div>

    <h1>B-MODAL</h1>

      <div>
        <b-button id="show-btn" @click="showModal">Open Modal</b-button>

        <b-modal class="mymodal" title="BootstrapVue"
                    ref="my-modal"
                    @shown="showModal()">

            <b-card no-body>
                <b-tabs content-class="mt-3" justified small card   >
                    <b-tab title="Tab1" active>
                        <div class="item select list-items math-lib">
                            <div class="middle aligned content">
                                <div class="math-lib-header">Title 1</div>
                            </div>
                        </div>
                    </b-tab>
                    <b-tab title="Tab2" active>
                        <div class="item select list-items math-lib">
                            <div class="middle aligned content">
                                <div class="math-lib-header">Title 2</div>
                            </div>
                        </div>
                    </b-tab>
                    <b-tab title="Tab3" active>
                        <div class="item select list-items math-lib">
                            <div class="middle aligned content">
                                <div class="math-lib-header">Title 3</div>
                            </div>
                        </div>
                    </b-tab>
                </b-tabs>
            </b-card>
        </b-modal>
      </div>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  methods: {
    showModal () {
      this.$refs['my-modal'].show()
    },
    hideModal () {
      this.$refs['my-modal'].hide()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

.mymodal {
  width: 500px;
}
</style>

All the bootstrap and bootstrap-vue scss gets compiled successfully and unique attribute id gets added with css class name. Issue is that whatever unique attribute generated for scoped scss, that attribute is not applying to b-modal or b-tabs components and child elements. To show the steps, I have created a sample application, which can be viewed on the link below: https://cksachdev.github.io/bootstrap-vue-scoped-scss-issue/

Code for the same can be found in the repo link below: https://github.com/cksachdev/bootstrap-vue-scoped-scss-issue

Steps to reproduce the bug

Include bootstrap and bootstrap vue scss in vue template

Expected behavior

Apply styles to bootstrap vue components as expected. Refer to screenshot below:

Actual behavior

Styles are not applied to bootstrap vue components. Refer to screenshot below:

Versions

 "bootstrap": "^4.4.1",
 "bootstrap-vue": "^2.3.0",

Libraries:

BootstrapVue: 2.3.0
Bootstrap: 4.4.1
Vue: 2.6.10

Environment:

Device: Mac
OS: macOS Mojave
Browser: Chrome
Version: 79

Demo link

https://cksachdev.github.io/bootstrap-vue-scoped-scss-issue/

Additional context

Trying to create a vue widget application. This widget will be included in a large angular application. Currently if bootstrap vue is added in main application, the css loaded in vue app, impacts the overall style of main application. Thus exploring option to scope the styles in vue template to ensure it doesn’t impact any of the styles in the main application. Trying to avoid using Iframe and make use of scoped scss feature.