web-dev-qa-db-ja.com

Bootstrap-vueはCSSをロードしません

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によって作成されたプロジェクト

javascriptcssvue.jsbootstrap-4bootstrap-vue
10
Alex Bondar

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>

これでタブのスタイルが修正されるはずです。

8
ackushiw

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

  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で動作しました

更新：

また、少し直感に反しているように感じても、必ずuse() Bootstrap-Vueパッケージ[〜＃〜] before [〜＃〜]new Vue() in main.js。例えば：

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

溶液：

App.vueへのインポート：

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