Vueブートストラップが正しくレンダリングされない

Question

VueとBootstrapを使用して新しいWebpackプロジェクトを開始しました。しかし、ブートストラップ要素はスタイリングを欠いているようです。特にb-nav,b-nav-itemおよびb-badgeであるが、おそらく他のタイプの大部分も同様である。

これは、それがどのように見えるかです： Vue-bootstrap does not render

メインテンプレート：

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

その子のテンプレート：

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

：

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

そして、ここでは、main.jsです

Answer 1

私はそれを見つけました！

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

は機能しません。これは最小化されたCSSファイルであってはなりません。