BulmaとNuxt/Content(というかPrism.js)の相性が結構辛い

環境

• nuxt: 2.14.6
• nuxt/content: 1.9.0
• prism-themes: 1.5.0
• nuxt-buefy: 0.4.3

デザイン大崩れ

Nuxt/Contentを使っていて、かなり苦戦した。特にNuxt/Contentが内包している、Prism.jsでコードのハイライトを出そうとしたときが辛かった。

これ、酷くない？

最初、何か設定をミスったのかと思って、prismの導入あたりのドキュメントを見ても問題ないし、じゃあ、何かのバグかっていうと、突拍子もなさすぎて訳わからん。
しばらく悩んで気がついた。
Bulmaのスタイルが当たってるんだ。
どうやらnumberというクラスが競合しているようだ。
（正直、このnumberクラス、ドキュメントにもないし、初めて見た。そして、何というか、今後使うことなさそう……）
他にもtagというクラスが競合するらしい（未確認）。

cssに関しては大の苦手なので、具体的な施策を提示する自信がないのですが、
とりあえず、Bulmaのスタイルより優先度上のセレクタで上書きする感じで無理矢理やりました。

結構いました。

調べてみたら同じ理由で困った人がちらほら。
Bulmaをやめてしまった人までいる。
みんな困ってるんだね。

他にも

Nuxt/Content側の話で、見出しがやけに右に寄るなあ、てのもあった（画像2行目）

見出しのリンク（h2 > a > span）にiconというクラスが割り当てられていて、そこにBulmaのクラスが当たって幅を持ってしまっていた。
まあ、そもそもNuxt/Contentは「こういう感じで生成するから自分でデザインしてね」なので良いのだが（自分ではなくBulmaが勝手にやってしまった、というのはあるけど）

感想

Nuxt/Contentもprismも自分の預かり知らないところでHTMLを構成するので、意図せずCSSフレームワークと競合するのはしんどいなあという感想です。
Nuxt/Contentは上記の通りなんだけど、prismは元々のデザインがあるから辛いなあと。
あと、これでBulmaを辞めるという決断になると、同時にbuefyを辞めるという事になるので、結構辛いなあ。