Can't install bootstrap, bulma and external vue css component

[wdrdres3qew5ts21]

I had problem with css rendering. Here I use vue-boostrap but after Vue-Storefront render complete my boostrap button will got override by Vue-Storefront css ?! So how can I install it properly with external vue-component or css framework ? How I can install external component properly do you guy have any advice because this is very important to many people.

[Gotsira]

I am having the same problem too. There is some problem with the babel/polyfill but still wondering how to solve this issue.

[psmyrek]

@wdrdres3qew5ts21 @Gotsira I just installed bootstrap-vue and bootstrap:

yarn add bootstrap-vue bootstrap

then I imported bootstrap-vue with styles in default theme in src\themes\default\index.js:

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

and finally I edited the Error.vue component similarly like you did:

<div class="container">
  <div>
    <b-button variant="success">It works!</b-button>
    <b-button variant="warning">It works!</b-button>
    <b-button variant="danger">It works!</b-button>
  </div>
  <h2>
    {{ $t("Something went wrong ...") }}
  </h2>
</div>

and it works. Bootstrap styles are not overwritten by vue-storefront styles.

Could you provide more details on how to reproduce your issue? Have you changed files or styles other than shown on screenshot?