Bootstrap-vue不加载CSS

Question

我正在使用Bootstrap4编写一个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创建的项目

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>

这应该可以修复选项卡的样式。

Answer 2

对于面临上述问题的新人。上面的答案对我来说都不起作用。我的问题是安装的bootstrap版本。npm安装了最新版本的5.1.0，它不能与bootstrap-vue一起工作。我不得不把bootstrap降级到4.5.3 (recommended version from website)

跟随npm install bootstrap@4.5.3 --save运行

Answer 3

bootstrap-vue需要特定版本bootstrap才能正常工作。以下是撰写本文时来自Bootstrap-vue doc的建议。

Vue.js v2.6 is required, v2.6.12 is recommended
Bootstrap v4.3.1 is required, v4.5.3 is recommended
Popper.js v1.16 is required for dropdowns (and components based on dropdown), tooltips, and popovers. v1.16.1 is recommended
PortalVue v2.1 is required by Toasts, v2.1.7 is recommended
jQuery is not required

解决方案:请使用yarn add bootstrap@4.5.3或npm -i bootstrap@4.5.3版本进行安装