Bootstrap-vue无法加载CSS。

Question

我正在使用Vue.js和Bootstrap 4编写应用程序，但是我无法加载，尽管我遵循了文档。

已添加到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创建的。

- Alex Bondar

---

Vue 2.5和Bootstrap-Vue 2.0.0也是同样的情况。CSS文件确实可以解析，但更改路径会在编译期间引发“未找到”错误。没有任何样式生效。 - Juha Untinen

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>

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

- ackushiw

---

我应该导入组件吗？ - Alex Bondar

如果您的根组件是App.vue，那么您需要将它放在App.vue中。 - ackushiw

仍然没有运气。结果相同。 - Alex Bondar

你能分享更多的代码吗？我可以在 Github 或 https://codesandbox.io/ 上查看。 - ackushiw

https://github.com/abondar24/SocialTournamentService/tree/master/admin_frontend，但我还没有提交最新的带有import的更改。 - Alex Bondar

已将导入提交到App.vue文件中。 - Alex Bondar

Answer 2

我曾经遇到过同样的问题，但幸运的是我找到了原因：加载程序没有被加载 :)

1. 确保你的 package.json 中都有vue-style-loader 和 css-loader
2. 然后在 webpack 配置文件中，你的 module.rules 应该包含如下代码：

   {
     test: /\.css/,
     use: ['vue-style-loader', 'css-loader'] // 必须都有！
   }

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 中在创建 new Vue() 之前使用了 Bootstrap-Vue 包的 use()。例如：

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

- Juha Untinen

---

我完全按照第一个示例所做的，使用的是VSCode编辑器，但明显它说“BootstrapVue”已声明但无法读取？在浏览器控制台中出现错误[显示/隐藏消息详细信息]。ReferenceError：BootstrapVue未定义。 - ARUN Madathil

@ARUNMadathil：这听起来像是“bootstrap-vue”包没有正确安装。您可以尝试再次运行“npm install bootstrap-vue --save”，并检查在安装过程中是否出现错误。您应该会在项目的“package.json”依赖项中得到一个条目。 - Juha Untinen

Answer 3

对于遇到上述问题的新手，请注意以下事项。以上所有答案都不适用于我。我的问题出在安装的bootstrap版本上。npm安装了最新版本的5.1.0，但它与bootstrap-vue不兼容。我不得不将bootstrap降级到4.5.3（官网建议版本）。

请运行以下命令：npm install bootstrap@4.5.3 --save

- Zeedia

---

谢谢指出这个问题！在帮助一个（初级）朋友将BootstrapVue添加到他的项目时，我差点忘记了这一点（调试了将近半个小时...）。 - Jonas D.

谢谢，我一直在为仅有的一些元素没有样式而苦恼。谢谢！ - Nikolay Dyankov

在bootstrap-vue的入门页面中的命令是错误的！“npm install vue bootstrap bootstrap-vue”，如果你这样做，它会安装最新版本的bootstrap，这与bootstrap-vue不兼容... - Ridvan Sumset

谢谢！我遇到了相同的问题，就是使用bootstrap-vue-next与Bootstrap 4而不是5的问题。 - rubebop

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

- daniel_po

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: {
  }
}

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

- user3738936

Answer 6

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

- perezmlal

Answer 7

解决方案：

在 App.vue 中导入：

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

- Alex Bondar