css - Vue-bootstrap 无法正确渲染

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>

其子模板:

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

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

我找到了!

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

不起作用。这不应该是最小化的 css 文件。