Css Vue引导无法正确渲染

我用Vue和Bootstrap启动了一个新的webpack项目。但是，引导元素似乎缺少一些样式。特别是b-nav、b-nav-item和b-badge，但也可能是大多数其他类型

这就是它看起来的样子：

主模板：

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

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

维朗利斯特耶斯
李斯特杰酒店
英斯特林根
Ingelogd:{{user}}，{{{househouse}}
Uitloggen
圣尼古拉斯

其子级的模板：

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

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

{{item.description}}

下面是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 }
})

从“Vue”导入Vue；
从“vue cookie”导入VueCookie；
从“引导vue”导入引导vue；
从“vue awesome/components/Icon”导入图标；
从“./App”导入应用程序；
从“./router”导入路由器；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“bootstrap vue/dist/bootstrap vue.css”；
导入“vue超级棒/图标”；
Vue.use（BootstrapVue）；
Vue.use（VueCookie）；
Vue.组件（“图标”，图标）；
Vue.config.productionTip=false；
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
路由器，
模板：“”，
组件：{App}
})

我找到了

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

不起作用。这不应该是最低限度的css文件