Bootstrap-vue не загружает CSS


Bootstrap-vue не загружает CSS

19.03.2018 11:02:37 Просмотров 47 Источник

Я пишу Vue.js приложение с Bootstrap 4 и я не могу загрузить, хотя я следовал документации.

Добавлено в main.js

Vue.use(BootstrapVue);

Добавлено в css-файл, связанный с 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-рендеринга, но в css-файле из dist dir я вижу Bootstrap Что я упускаю? Проект, созданный vue-cli 3.0-beta

У вопроса есть решение - Посмотреть?

Ответы - Bootstrap-vue не загружает CSS / Bootstrap-vue doesn't load CSS

ackushiw

20.03.2018 12:31:32

Попробуйте импортировать файлы с помощью 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>

Это должно исправить стиль вкладок.

Alex Bondar

21.03.2018 01:54:27

Решение:

Импорт в App.vue:

'../../node_modules/bootstrap/dist/css/bootstrap.css';
'../../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
Juha Untinen

16.07.2018 02:24:51

Я столкнулся с этой же проблемой, но, к счастью, нашел причину: загрузчик не загружен :)

  1. Убедитесь, что у вас есть как Vue-style-loader, так и css-loader в package.json
  2. Затем в вашей конфигурации webpack ваш module. rules должен иметь этот объект:
    {
     тест: /\.в CSS/,
     использование: ['Вью в стиле-погрузчик', 'УСБ-погрузчик'] // обе нужны!
    }
  3. И в вашем App.vue, в разделе <script>, вы должны импортировать:
    импорт от "Bootstrap/dist в/фрагмента/начальной загрузки.мин.в CSS";
    импорт " bootstrap-vue/dist/bootstrap-vue. css";

Нет необходимости использовать @ или относительные пути node_modules или что-то еще.

С этими изменениями он работал для меня с Vue 2.5 и Bootstrap-Vue 2.0.0


Обновление:

Кроме того, даже если это кажется немного нелогичным, убедитесь, что вы use() пакет Bootstrap-Vue, прежде чем создавать new Vue() в 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);
perezmlal

07.05.2020 11:31:12

В моем случае я работал с vue-cli 4.3.1, и я использовал эту конфигурацию по ошибке.

Если вы удалите эту конфигурацию, то все будет работать хорошо!

https://cli.vuejs.org/guide/css.html#css-modules

Если вы хотите удалить .module в именах файлов, установите css.requireModuleExtension в false in vue.config.js:

// vue.config.js
module.exports = {
  css: {
    requireModuleExtension: false
  }
}
user3738936

20.09.2020 03:22:44

Мне пришлось сделать комбинацию / вариацию некоторых других ответов.

Приложение.Вью:

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import Vue from 'vue'


// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

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



export default {
  name: 'App',
  components: {
  }
}

Источники: https://forum.vuejs.org/t/ui-library-styles-not-loading-in-web-components/77858/2 https://bootstrap-vue.org/docs

Помочь в развитии проекта:
Закрыть X