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);

Added to css file related to App.vue:

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

Here is template:

<div class="main">
<div>

    <b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
        <p class="my-4">{{msg}}</p>
        <p class="my-4">{{statusCode}}</p>

    </b-modal>
</div>

<div>
    <b-tab title="Players" active>
        <br>Players data
    </b-tab>
    <b-tab title="Tournaments" active>
        <br>Tournament data
    </b-tab>
</div>

Result: no css rendered but in css file from dist dir I see Bootstrap What am I missing? The project created by vue-cli 3.0-beta

Same thing with Vue 2.5 and Bootstrap-Vue 2.0.0. The CSS files do resolve, as changing the path raises a Not Found error during compilation. No style takes effect. — Juha Untinen, Jul 16 '18 at 11:12

ackushiw · Answer 1 · 2018-03-20T22:23:46.710

12

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.

edited Mar 20 '18 at 22:23

answered Mar 19 '18 at 21:31

ackushiw

1,581
2
12
14

should I import to component? – Alex Bondar Mar 19 '18 at 22:35
1

You'll want it in App.vue if that's your root component – ackushiw Mar 19 '18 at 22:37
still no luck. the same result – Alex Bondar Mar 19 '18 at 22:50
Can you share more of your code? I could have a look on github or https://codesandbox.io/ – ackushiw Mar 20 '18 at 00:24
https://github.com/abondar24/SocialTournamentService/tree/master/admin_frontend but I havent commited yet latest changes with import – Alex Bondar Mar 20 '18 at 09:14
1

commited import to App.vue – Alex Bondar Mar 20 '18 at 18:35

Juha Untinen · Answer 2 · 2018-07-16T11:39:09.487

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

Make sure you have both vue-style-loader and css-loader in package.json

Then in your webpack config, your module.rules should have this object:

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

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);

I did exactly same as in first example , and im using vscode as editor but its clearly saying that 'BootstrapVue' is declared but cant read ?? in browser console got the error [Show/hide message details.] ReferenceError: BootstrapVue is not defined — ARUN Madathil, Jul 27 '18 at 08:51
@ARUNMadathil: That sounds like the ``bootstrap-vue`` package did not install correctly. You could try running ``npm install bootstrap-vue --save`` again, and check that no errors appear during the install. You should get an entry in your project's ``package.json`` dependencies. — Juha Untinen, Jul 27 '18 at 10:02

score 0 · Answer 3 · answered May 07 '20 at 20:31

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
  }
}

score 0 · Answer 4 · answered Sep 20 '20 at 00:22

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

score -1 · Answer 5 · answered Mar 20 '18 at 22:54

-1

Solution:

Import to App.vue:

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

answered Mar 20 '18 at 22:54

Alex Bondar

942
3
17
30

Bootstrap-vue doesn't load CSS

5 Answers5

Linked