Bootstrap-vue doesn't load CSS

Question

I am writing a Vue.js app with Bootstrap 4 and I can\'t loaded though I followed the documentation.

Added to main.js

Vue.use(BootstrapVue);

Answer 1

Solution:

Import to App.vue:

'../../node_modules/bootstrap/dist/css/bootstrap.css';
'../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

Answer 2

In my case I was working with vue-cli 4.3.1, and I was using this configuration by error.

If you remove this configuration then all work nice!

https://cli.vuejs.org/guide/css.html#css-modules

If you want to drop the .module in the filenames, set css.requireModuleExtension to false in vue.config.js:

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

Answer 3

Try importing the files using JavaScript.

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

---

On closer inspection it looks like you're missing <b-tabs>
also <b-modal> is controlled by v-model

<div class="main">
    <div>
        <b-modal id="modal1" title="Something went wrong" v-model="errorModal">
            <pre class="my-4">{{ msg }}</pre>
            <p class="my-4">{{ statusCode }}</p>
        </b-modal>
    </div>
    <!-- Make sure to wrap b-tab in b-tabs -->
    <b-tabs> 
        <b-tab title="Players" active>
                <br>Players data
        </b-tab>
        <b-tab title="Tournaments">
                <br>Tournament data
        </b-tab>
    </b-tabs>
</div>

That should fix the styling of the tabs.

Answer 4

I came across this same issue, but luckily I found the cause: The loader is not loaded :)

1. Make sure you have both vue-style-loader and css-loader in package.json
2. Then in your webpack config, your module.rules should have this object:

   {
     test: /\.css/,
     use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
   }

3. And in your App.vue, under the <script> section, you should import:

   import "bootstrap/dist/css/bootstrap.min.css";
   import "bootstrap-vue/dist/bootstrap-vue.css";

No need to use @ or relative node_modules paths or anything.

With these changes, it worked for me with Vue 2.5 and Bootstrap-Vue 2.0.0

---

Update:

Also, even though it feels a bit counter-intuitive, make sure you use() the Bootstrap-Vue package BEFORE you create the new Vue() in main.js. For example:

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

Vue.use(BootstrapVue);

new Vue({
  el: '#app',
  router,
  components: { App },
  render: h => h(App),
});

If you do it in reverse order, it works only partially. For example some block elements will not have styles applied.

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

new Vue({
  el: '#app',
  router,
  components: { App },
  render: h => h(App),
});

// Doing this after new Vue() will NOT work correctly:
Vue.use(BootstrapVue);

Answer 5

I had to do a combination/variation of some of the other answers.

App.vue:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Vue from 'vue'


// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

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



export default {
  name: 'App',
  components: {
  }
}

Sources: https://forum.vuejs.org/t/ui-library-styles-not-loading-in-web-components/77858/2 https://bootstrap-vue.org/docs