CODEWITHSUNDEEP
javascriptcssvue.jsbootstrap-4bootstrap-vue
fghf
fghf

Reputation: 724

Bootstrap-vue doesn't load CSS

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

Upvotes: 18

Views: 36437

Answers (7)

daniel_po
daniel_po

Reputation: 21

bootstrap-vue require specific version of bootstrap in order to work correctly. Below is the recommendation from the Bootstrap-vue doc at the time of writing.

Vue.js v2.6 is required, v2.6.12 is recommended
Bootstrap v4.3.1 is required, v4.5.3 is recommended
Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended
PortalVue v2.1 is required by Toasts, v2.1.7 is recommended
jQuery is not required

Solution: Please install with the version yarn add [email protected] or npm -i [email protected]

Upvotes: 2

Zeedia
Zeedia

Reputation: 1483

For new people facing above issue. None of the above answers worked for me. My problem was with installed bootstrap version. npm installled lastest version 5.1.0 which does not work with bootstrap-vue. I had to downgrade bootstrap to 4.5.3 (recommended version from website)

run following npm install [email protected] --save

Upvotes: 7

Don M
Don M

Reputation: 986

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

Upvotes: 1

perezmlal
perezmlal

Reputation: 390

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

Upvotes: 0

Juha Untinen
Juha Untinen

Reputation: 1857

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

Upvotes: 12

fghf
fghf

Reputation: 724

Solution:

Import to App.vue:

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

Upvotes: -2

ackushiw
ackushiw

Reputation: 1736

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.

Upvotes: 14

Related Questions