Bootstrap-vue 不加载 CSS

Question

我正在使用 Bootstrap 4 编写 Vue.js 应用程序，但我无法加载，尽管我遵循了文档。

添加到 main.js

Vue.use(BootstrapVue);

在 App.vue 相关的 css 文件中添加：

 @import '../../node_modules/bootstrap/dist/css/bootstrap.css';
@import '../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';

这是模板：

 <div class="main">
<div>

    <b-modal id="modal1" title="Something went wrong" v-if="!serverStatusOk">
        <p class="my-4">{{msg}}</p>
        <p class="my-4">{{statusCode}}</p>

    </b-modal>
</div>

<div>
    <b-tab title="Players" active>
        <br>Players data
    </b-tab>
    <b-tab title="Tournaments" active>
        <br>Tournament data
    </b-tab>
</div>

结果：没有呈现 css 但在 dist 目录的 css 文件中我看到 Bootstrap 我错过了什么？ vue-cli 3.0-beta创建的项目

原文由 Alex Bondar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试使用 JavaScript 导入文件。

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

---

仔细检查后，您似乎不见了 <b-tabs>

也 <b-modal> 由 v-model 控制

<div class="main">
    <div>
        <b-modal id="modal1" title="Something went wrong" v-model="errorModal">
            <pre class="my-4">{{ msg }}</pre>
            <p class="my-4">{{ statusCode }}</p>
        </b-modal>
    </div>
    <!-- Make sure to wrap b-tab in b-tabs -->
    <b-tabs>
        <b-tab title="Players" active>
                <br>Players data
        </b-tab>
        <b-tab title="Tournaments">
                <br>Tournament data
        </b-tab>
    </b-tabs>
</div>

那应该修复选项卡的样式。

原文由 ackushiw 发布，翻译遵循 CC BY-SA 3.0 许可协议