為什么將Buefy導入我的Vuejs項目會導致 <h1> 標簽和某些Bootstrap元素顯示的樣式錯誤？

Question

我在簡單的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中會導致此問題：

Answer 1

Buefy基於底層的Bulma CSS框架，該框架在某些方面與Bootstrap沖突，因為它們暗示全局樣式和類名稱可能相同。

您可以嘗試將LESS與Bootstrap結合使用以避免沖突，但是我覺得這太過復雜了，您應該只使用其中一個，而要知道那里有一個Bootstrap-Vue端口，而Bulma （ Buefy也是Buefy ）做的完全一樣。就像使用Bootstrap