Bootstrap Vue在使用卡时不显示css

Question

最近，我已经使用bootsrap vue进行了宣传。我写了以下代码：

<template>
    <div>
      <div>
        <b-card-group>
          <b-card border-variant="dark" header="Dark" align="center">
            <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
          </b-card>
        </b-card-group>
      </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { BCard, BCardText, BCardGroup, } from 'bootstrap-vue';

    export default {
        components: {
            'b-card': BCard,
            'b-card-text': BCardText,
            'b-card-group': BCardGroup,
        },

        // More code
    }
</script>

该示例取自docs：

但是由于某些原因，我没有获得CSS设计（边框和颜色）：

它只是显示纯文本。可能是什么问题？我使用的组件不正确吗？

EDIT：我的main.js看起来像：

import Vue from 'vue';
import App from '../components/App.vue';
import router from '../router/router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

new Vue({
  el: '#app',
  router,
  components: {
    'app': App
  },
});

但是它仍然不起作用。

Answer 1

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
将其写入app.js文件中

Answer 2

尝试在html元素上使用类，如：