Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scope Bootstrap Css in Vue

I'm trying to use Bootstrap in a Vue component, and I want all CSS to be scoped. I tried something like this:

<style scoped>
@import "~bootstrap/dist/css/bootstrap.css";
@import "~bootstrap-vue/dist/bootstrap-vue.css";
</style>

But it doesn't seem like the css is scoped. Is there any way to do that?

like image 828
vitalii Avatar asked Apr 04 '18 14:04

vitalii


People also ask

What is scoped CSS in Vue?

Scoped CSS # With scoped , the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

Can I use Bootstrap with Vue?

With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue. js and the world's most popular front-end CSS library — Bootstrap v4. Bootstrap v4 is the world's most popular framework for building responsive, mobile-first sites. Vue.

Can I use scoped CSS?

Allows CSS rules to be scoped to part of the document, based on the position of the style element. The attribute has been removed from the current specification.


2 Answers

<style scoped src="~bootstrap/dist/css/bootstrap.css"></style>

<style scoped src="~bootstrap-vue/dist/bootstrap-vue.css"></style>

Update: a hack using SCSS

Reason why the first solution won't work:

With scoped, the parent component's styles will not leak into child components.

If you want a selector in scoped styles to be "deep", i.e. affecting child components, you can use the >>> combinator

from the Vue doc for scoped CSS

The modal you mentioned is apparently not being controlled by the component where you imported bootstrap. Perhaps it's a child component. Perhaps you're using the jquery version of Bootstrap modal. Either way, the data attributes won't be added to the modal.

In order to solve this, you need Deep Selector. (you may read about it in more detail in https://vue-loader.vuejs.org/en/features/scoped-css.html)

Here's how I would import the entire Bootstrap CSS using SCSS. (I think it's impossible to do this using pure CSS only.)

<template>
  <div class="main-wrapper">
    /* ... */
  </div>
</template>

<style scoped lang="scss">
.main-wrapper /deep/ {
  @import "~bootstrap/dist/css/bootstrap.min";
}
</style>

Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ combinator instead - it's an alias for >>> and works exactly the same.

The generated CSS would be similar to

.main-wrapper[data-v-656039f0] .modal {
    /* some css... */
}

.. which is what you want.

BUT, I gotta say, importing the entire Bootstrap CSS is a really bad practice. Try to import only and exactly what you are going to use from bootstrap-sass instead.

This solution is hacky. But it's the only way I know that can work for your use case.

like image 196
Jacob Goh Avatar answered Oct 03 '22 03:10

Jacob Goh


I know it's an old question but this solution work for me

<style lang="scss" scoped>
 ::v-deep {
   @import 'bootstrap/scss/bootstrap.scss';
 }
</style>
like image 26
Mirza Andriamanamisoa Avatar answered Oct 03 '22 04:10

Mirza Andriamanamisoa