web-dev-qa-db-fra.com

Bootstrap-vue ne charge pas le CSS

J'écris une application Vue.js avec Bootstrap 4 et je ne peux pas charger bien que j'ai suivi la documentation.

Ajouté à main.js

Vue.use(BootstrapVue);

Ajouté au fichier css lié à App.vue:

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

Voici le modèle:

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

Résultat: pas de css rendu mais dans le fichier css du répertoire dist je vois Bootstrap Que manque-t-il? Le projet créé par vue-cli 3.0-beta

javascriptcssvue.jsbootstrap-4bootstrap-vue
7
Alex Bondar

J'ai rencontré le même problème, mais heureusement, j'ai trouvé la cause: le chargeur n'est pas chargé :)

  1. Assurez-vous que vous avez bien vue-style-loader et css-loader in package.json
  2. Ensuite, dans votre configuration Webpack, votre module.rules devrait avoir cet objet: 
    {
 test: /\.css/,
 use: ['vue-style-loader', 'css-loader'] // les deux sont nécessaires! 
}
  3. Et dans votre App.vue, sous la section <script>, vous devez importer: 
    import "bootstrap/dist/css/bootstrap.min.css"; 
 import "bootstrap-vue/dist/bootstrap-vue.css";

Pas besoin d'utiliser @ ou des chemins node_modules relatifs ou quoi que ce soit.

Avec ces changements, cela a fonctionné pour moi avec Vue 2.5 et Bootstrap-Vue 2.0.0

Mettre à jour:

De plus, même si cela vous semble un peu contre-intuitif, assurez-vous de use() le package Bootstrap-VueAVANTvous créez la new Vue() dans main.js . Par exemple:

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

Si vous le faites dans l'ordre inverse, cela ne fonctionne que partiellement. Par exemple, aucun style ne sera appliqué à certains éléments de bloc.

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

Essayez d'importer les fichiers en utilisant JavaScript. 

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

À y regarder de plus près, il semble que vous manquiez <b-tabs> 
aussi <b-modal> est contrôlé par 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>

Cela devrait corriger le style des onglets.

3
ackushiw

Solution:

Importer vers App.vue:

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