17

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 dir の css ファイルには Bootstrap が表示されます。vue-cli 3.0-beta によって作成されたプロジェクト

4

7 に答える 7

10

私はこの同じ問題に遭遇しましたが、幸運にも原因を見つけました:ローダーがロードされていません:)

  1. vue-style-loaderとcss-loaderの両方があることを確認してくださいpackage.json
  2. 次に、webpack 構成で、module.rulesに次のオブジェクトが必要です。 
    {
  テスト: /\.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でを作成する前に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);
于 2018-07-16T11:24:51.223 に答える