Vue 부트 스트랩이 제대로 렌더링되지 않습니다.

Question

Vue 및 Bootstrap과 함께 새로운 웹팩 프로젝트를 시작했습니다. 그러나 부트 스트랩 요소는 일부 스타일이 누락 된 것 같습니다. 특히 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 파일이 아니어야합니다.