为什么 BootstrapVue 不渲染？

Question

我最近使用 npm 安装 BootstrapVue： npm install vue bootstrap-vue bootstrap

然后我将 BootstrapVue 包含到我的项目的根目录中，如下所示：

import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
Vue.config.productionTip = false

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

最后，这是我用来测试 BootstrapVue 组件的模板：

<template>
  <div>
      <search-bar />
      <div v-for="post in posts" :key="post.id">
          <post :postData="post" />
      </div>
      <b-button pill >TEST</b-button>
  </div>
</template>

当我去检查网页时，按钮出现了，但它没有任何样式呈现。奇怪的是，当我检查 Vue 开发工具扩展时，BButton 组件被识别并包含所有样式属性（在这种情况下，只是“药丸”选项设置为 true）。我什至检查了 DOM 上的按钮元素，它包含从 BootstrapVue 传递下来的类，但没有呈现这些样式。我在这里错过了什么？

另外，为了更好地衡量，我查看了 package.json 文件以确保 Bootstrap 和 BootstrapVue 已安装并且是最新的。他们是。

Answer 1

在您的项目根目录（app.js）中，您需要再添加 2 行

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

导入css文件