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

问题描述

我正在使用Bootstrap 4编写一个Vue.js应用程序，虽然我按照文档说明但无法加载。

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

已添加到main.js

Added to main.js

Vue.use（BootstrapVue）;

添加到css文件与App.vue相关：

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

这是模板：

<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 dir的css文件中我看到Bootstrap
我缺少什么？由vue-cli 3.0-beta创建的项目

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

推荐答案

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

I came across this same issue, but luckily I found the cause: The loader is not loaded :)

1. 确保您同时拥有 vue-style-loader 和 css -loader 在 package.json


2. 然后在你的webpack配置中， module.rules 应该有这个对象：
   
   

1. Make sure you have both vue-style-loader and css-loader in package.json
2. Then in your webpack config, your module.rules should have this object:

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

并在 App.vue 中，在< script> 部分，您应导入：

And in your App.vue, under the <script> section, you should import:

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

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

No need to use @ or relative node_modules paths or anything.

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

With these changes, it worked for me with Vue 2.5 and Bootstrap-Vue 2.0.0

更新：

此外，即使感觉有点违反直觉，请确保使用（） Bootstrap-Vue包之前您在 main.js 中创建 new Vue（）。例如：

Also, even though it feels a bit counter-intuitive, make sure you use() the Bootstrap-Vue package BEFORE you create the new Vue() in main.js. For example:

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

如果按相反顺序执行，则只能部分工作。例如，某些块元素不会应用样式。

If you do it in reverse order, it works only partially. For example some block elements will not have styles applied.

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

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