javascript - 为什么将Buefy导入我的Vuejs元素会导致<h1>标签和某些Bootstrap元素显示错误的样式？

我在简单的webpack 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);

删除导入Buefy时应该是什么：



但是将Buefy导入到main.js中会导致此问题：

最佳答案

Buefy基于底层的Bulma CSS框架，该框架在某些点上与Bootstrap冲突，因为它们暗示全局样式和类名称可能相同。

您可以尝试将LESS与Bootstrap结合使用以避免冲突，但是我觉得这太过复杂了，您应该只使用一个或另一个，知道有一个Bootstrap-Vue端口，并且Bulma（也就是Buefy）可以与Bootstrap完全相同的操作

关于javascript - 为什么将Buefy导入我的Vuejs元素会导致<h1>标签和某些Bootstrap元素显示错误的样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53219555/