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

我遇到了同样的问题，但幸运的是我找到了原因：加载程序未加载:)

1. 确保您在 package.json 中同时拥有 vue-style-loader 和 css-loader
2. 然后在你的 webpack 配置中，你的 module.rules 应该有这个对象： { 测试：/\.css/， use: ['vue-style-loader', 'css-loader'] // 两者都需要！ }
3. 在App.vue 的<script> 部分下，您应该导入：

   导入“bootstrap/dist/css/bootstrap.min.css”；
   导入“bootstrap-vue/dist/bootstrap-vue.css”；

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

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

---

更新：

此外，尽管感觉有点反直觉，但请确保您 use() Bootstrap-Vue 包在在 ma​​in.js 中创建 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);

Answer 3

对于面临上述问题的新人。以上答案都不适合我。我的问题是安装的引导版本。 npm installled 最新版本 5.1.0 不适用于 bootstrap-vue。我不得不将引导程序降级为 4.5.3 (recommended version from website)

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

Answer 4

在我的例子中，我使用的是 vue-cli 4.3.1，我错误地使用了这个配置。

如果您删除此配置，则一切正常！

https://cli.vuejs.org/guide/css.html#css-modules

如果要删除文件名中的 .module，请在 vue.config.js 中将 css.requireModuleExtension 设置为 false：

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}

Answer 5

我必须对其他一些答案进行组合/变化。

App.vue：

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Vue from 'vue'


// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

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



export default {
  name: 'App',
  components: {
  }
}

来源： https://forum.vuejs.org/t/ui-library-styles-not-loading-in-web-components/77858/2 https://bootstrap-vue.org/docs

Answer 6

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版本安装

Answer 7

解决方案：

导入到 App.vue：

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