vue css load,Bootstrap-vue doesn't load CSS

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