Scope Bootstrap CSS in Vue

How to scope internal Vue application css from rest of the website?

Ok, I've figured it out.

Pretty simple really, combined with this answer to prevent parent -> child inheritance. I scoped all Vue css into #app { /*styles*/ } INCLUDING the bootstrap import. E.g.

<style type="text/scss" lang="scss">
    #app {
        @import '../node_modules/bootstrap/scss/bootstrap';

        // rest of vue global styles go here.
        // child components may use scoped
    }
</style>

Note: I am NOT using scoped attribute on the root vue component.

Override CSS for specific Bootstrapvue Components

This works:

<style lang="scss">
.btn-group-toggle:not(#_) label {
  /* general styles */
  &.disabled {
  }
  &.focus {
  }
  &.active {
  }
  &:hover {
  }
}
</style>

When adding scoped attribute to the <style> tag, you're largely at the hand of your installed pre-processor which might or might not be able to parse >>>, /deep/, ::v-deep or :deep(), depending on version.

To stay away from such issues, I use the suggestion made in Vue Loader's docs: I create a separate <style> tag for bootstrap-vue internals, without the scoped attribute and keep the rest of component style rules in a <style scoped>.

Working demo.

Related Topics