javascript - 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. 确保你有vue-style-loader和css- loaderpackage.json
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

---

更新：

此外，即使感觉有点违反直觉，请确保在创建in 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);

Answer 3

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

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

Answer 4

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

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 5

在我的情况下，我使用的是 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 6

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

应用程序.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 7

解决方案：

导入 App.vue：

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