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