为什么将 Buefy 导入我的 Vuejs 项目会使 <h1> 标签和一些 Bootstrap 元素显示错误的样式？

Question

我在我的 webpack-simple Vue.js 项目中使用 Bootstrap 4 和 Buefy。当我像在文档中一样导入 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);

当我删除 import Buefy 时应该是什么：

但是将 Buefy 导入我的 main.js 会导致这个问题：

Answer 1

Buefy 基于基础 Bulma CSS 框架，在某些方面与 Bootstrap 冲突，因为它们暗示全局样式和 class 名称可能是一样的。

您可以尝试将 LESS 与 Bootstrap 一起使用以避免冲突，但我觉得这太复杂了，您应该只使用一个或另一个，因为知道有一个 Bootstrap-Vue 端口并且那个Bulma（Buefy 还有）做与 Bootstrap

完全相同的事情