Навигационная панель CoreUI разрушена после импорта файлов bootstrap и bootstrap - vue css - PullRequest
Новая
       28

Навигационная панель CoreUI разрушена после импорта файлов bootstrap и bootstrap - vue css

0 голосов
/ 27 февраля 2020

Я добавил bootstrap и bootstrap - vue в свой проект через npm. После этого я добавил два верхних оператора импорта в файл приложения. vue. После этого он разрушает дизайн стандартной горизонтальной навигационной панели CoreUI. Что я делаю не так? 

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
    //Import bootstrap <-- Those two are new
    @import '~bootstrap';
    @import '~bootstrap-vue';
    //Import Main styles for this application
    @import 'assets/scss/style';
</style>

Как только я снова их комментирую, дизайн возвращается в норму, но мой b-table выглядит не так.

1 Ответ

3 голосов
/ 28 февраля 2020

CoreUI использует настроенную версию Bootstrap V4.x S CSS (в основном, вы импортируете две версии bootstrap v4 CSS).

Пока S CSS у CoreUI определяет Bootstrap v4 переменные, а затем делает это в вашем основном S CSS файле 

// Import CoreUI SCSS
// This assumes CoreUI imports bootstrap variables, functions, etc
@import '~coreui';
// Import BootstrapVue SCSS
@import '~bootstrap-vue';

// Add/Import style overrides and custom styles here

. Это позволяет BootstrapVue S CSS использовать переопределения переменных, определенные CoreUI S CSS

...