Почему импорт Buefy в мой проект Vuejs приводит к тому, что тег <h1> и некоторые элементы Bootstrap отображают неправильный стиль?

Question

Я использую Bootstrap 4 и Buefy в своем простом веб-проекте Vue.js. Когда я импортирую Buefy, как в Документах, мой тег не увеличивает текст, а навигационная панель в Bootstrap 4 отображает неправильную ширину.

Мой файл main.js выглядит следующим образом

import Vue from 'vue';
import "bootstrap/dist/css/bootstrap.min.css";
import 'buefy/dist/buefy.css';
import Buefy from 'buefy';
Vue.use(Buefy);

Что должно быть при удалении импорта Buefy:

Но импорт Buefy в мой main.js приводит к этой проблеме:

Answer 1

Buefy основан на базовой Bulma CSS-структуре, которая в некоторых моментах конфликтует с Bootstrap, поскольку подразумевает, что глобальные стили и имена классов могут совпадать.

Вы можете попробовать использовать LESS с Bootstrap, чтобы избежать конфликтов, но я чувствую, что это слишком сложно, и вы должны просто остаться с одним или другим, зная, что есть порт Bootstrap-Vue и что Bulma (Buefy также тогда) делайте то же самое, что вы можете сделать с Bootstrap