Vue-Bootstrap wird nicht korrekt gerendert

Question

Ich habe ein neues Webpack-Projekt mit Vue und Bootstrap gestartet. Die Bootstrap-Elemente scheinen jedoch etwas Styling zu vermissen. Insbesondere b-nav, b-nav-Artikel und b-Badge, aber wahrscheinlich auch die meisten anderen Typen.

Dies ist, wie es aussieht: Vue-bootstrap does not render

Hauptvorlage:

<div class="container-fluid"> 
    <b-nav tabs> 
     <b-nav-item to="/lists">Verlanglijstjes</b-nav-item> 
     <b-nav-item to="/ownlist">Eigen lijstje</b-nav-item> 
     <b-nav-item to="/settings">Instellingen</b-nav-item> 
     <div class="pull-right"> 
     <span>Ingelogd: {{ user }}, {{ household }}</span> 
     <b-button variant="link" @click="logOff"><icon name="sign-out" class="button-icon"></icon>Uitloggen</b-button> 
     </div> 
    </b-nav> 
</div> 
<div class="container"> 
    <h1>Sinterklaas</h1> 
    <router-view/> 
</div> 

Seine Kinder Vorlage:

<div> 
    <div v-for="item in items"> 
     <b-badge @click="deleteItem(item)" variant="danger"><icon name="trash"></icon></b-badge> 
     <b-badge @click="editItem(item)" variant="primary"><icon name="pencil"></icon></b-badge> 
     <span>{{ item.description }}</span> 
    </div> 
</div> 

Und hier ist main.js:

import Vue from 'vue'; 
import VueCookie from 'vue-cookie'; 
import BootstrapVue from 'bootstrap-vue'; 
import Icon from 'vue-awesome/components/Icon'; 
import App from './App'; 
import router from './router'; 
import 'bootstrap/dist/css/bootstrap.min.css'; 
import 'bootstrap-vue/dist/bootstrap-vue.css'; 
import 'vue-awesome/icons'; 

Vue.use(BootstrapVue); 
Vue.use(VueCookie); 
Vue.component('icon', Icon); 
Vue.config.productionTip = false; 

/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    router, 
    template: '<App/>', 
    components: { App } 
}) 

Answer 1

Ich habe es gefunden!

import 'bootstrap/dist/css/bootstrap.min.css' 

funktioniert nicht. Dies sollte nicht die minimierte CSS-Datei sein.