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

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

对于面临上述问题的新人。上述答案都不适合我。我的问题是安装的引导程序版本。npm 安装了最新版本5.1.0，该版本不适用于 bootstrap-vue。我不得不将 bootstrap 降级为4.5.3 （网站推荐版本）

运行以下 npm install bootstrap@4.5.3 --save

Answer 3

我遇到了同样的问题,但幸运的是我找到了原因:加载器未加载:)

1. 请确保您有两个VUE式装载机和CSS-装载机在package.json
2. 然后在你的webpack配置中,你的module.rules应该有这个对象:

   {
     test: /\.css/,
     use: ['vue-style-loader', 'css-loader'] // BOTH are needed!
   }

3. 在你的App.vue,在该<script>部分下,你应该导入:

   import "bootstrap/dist/css/bootstrap.min.css";
   import "bootstrap-vue/dist/bootstrap-vue.css";

无需使用@或相对node_modules路径或任何东西.

通过这些更改,它适用于Vue 2.5和Bootstrap-Vue 2.0.0

更新:

此外,尽管感觉有点违反直觉,但在创建main.js 之前,请确保use()使用Bootstrap-Vue包.例如:new Vue()

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

Vue.use(BootstrapVue);

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

如果以相反的顺序执行,它只能部分工作.例如,某些块元素不会应用样式.

import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';

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

// Doing this after new Vue() will NOT work correctly:
Vue.use(BootstrapVue);