webentwicklung-frage-antwort-db.com.de

Bootstrap-vue lädt kein CSS

Ich schreibe eine Vue.js-App mit Bootstrap 4 und kann sie nicht laden, obwohl ich der Dokumentation gefolgt bin.

Zur main.js hinzugefügt

Vue.use(BootstrapVue);

Zur CSS-Datei mit Bezug zu App.vue hinzugefügt:

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

Hier ist Vorlage:

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

Ergebnis: kein CSS gerendert, aber in der CSS-Datei von dist dir sehe ich Bootstrap Was fehlt mir? Das von vue-cli 3.0-beta erstellte Projekt

7
Alex Bondar

Ich bin auf dasselbe Problem gestoßen, aber zum Glück habe ich die Ursache gefunden: Der Loader wird nicht geladen :)

  1. Stellen Sie sicher, dass Sie sowohl vue-style-loader als auch css-loader in package.json haben.
  2. In Ihrer Webpack-Konfiguration sollte Ihr module.rules folgendes Objekt haben:
    {
     Test: /\.css/,
     use: ['vue-style-loader', 'css-loader'] // BEIDES werden benötigt! 
    }
  3. Und in Ihrem App.vue im Abschnitt <script> sollten Sie Folgendes importieren:
    import "bootstrap/dist/css/bootstrap.min.css"; 
     import "bootstrap-vue/dist/bootstrap-vue.css";

Keine Notwendigkeit, @ oder relative node_modules Pfade oder irgendetwas zu verwenden.

Mit diesen Änderungen funktionierte es für mich mit Vue 2.5 und Bootstrap-Vue 2.0.0


Update:

Auch wenn es sich ein bisschen als wenig intuitiv anfühlt, stellen Sie sicher, dass Sie use() das Bootstrap-Vue-Paket ERSTELLEN, BEVOR SIE MIT die new Vue() in main.js erstellen. Zum Beispiel:

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

Wenn Sie es in umgekehrter Reihenfolge ausführen, funktioniert es nur teilweise. Beispielsweise werden für einige Blockelemente keine Stile angewendet.

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);
5
Juha Untinen

Versuchen Sie, die Dateien mit JavaScript zu importieren. 

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

Bei näherer Betrachtung sieht es so aus, als ob Sie <b-tabs> fehlen. 
auch <b-modal> wird von v-model gesteuert.

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

Das sollte das Styling der Registerkarten festlegen.

3
ackushiw

Lösung:

Import in App.vue:

'../../node_modules/bootstrap/dist/css/bootstrap.css';
'../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
0
Alex Bondar