Bootstrap-vue 不加载 CSS [英] Bootstrap-vue doesn't load CSS

问题描述

我正在使用 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><b-modal id="modal1" title="出错了" v-if="!serverStatusOk"><p class="my-4">{{msg}}</p><p class="my-4">{{statusCode}}</p></b-modal>
<div><b-tab title="玩家"活动><br>玩家数据</b-tab><b-tab title="锦标赛"活动><br>比赛数据</b-tab>

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

解决方案

尝试使用 JavaScript 导入文件.

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

<小时>

仔细检查后，您似乎遗漏了
也由 v-model

控制

<div><b-modal id="modal1" title="出错了" v-model="errorModal"><pre class="my-4">{{ msg }}</pre><p class="my-4">{{ statusCode }}</p></b-modal>
<!-- 确保将 b-tab 包裹在 b-tabs 中 --><b-tabs><b-tab title="玩家"活动><br>玩家数据</b-tab><b-tab title="锦标赛"><br>比赛数据</b-tab></b-tabs>

这应该修复标签的样式.

I am writing a Vue.js app with Bootstrap 4 and I can't loaded though I followed the documentation.

Added to main.js

Vue.use(BootstrapVue);

Added to css file related to App.vue:

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

Here is template:

<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>

Result: no css rendered but in css file from dist dir I see Bootstrap What am I missing? The project created by vue-cli 3.0-beta

解决方案

Try importing the files using JavaScript.

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

---

On closer inspection it looks like you're missing <b-tabs>
also <b-modal> is controlled by 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>

That should fix the styling of the tabs.

这篇关于Bootstrap-vue 不加载 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！