Vue の SFC で特定の CSS セレクタだけ scoped ではなく global にしたい

特定のライブラリなどでどうしても body タグに Element が追加されたりするようなものに対して style を設定する場合、SFC の style を scoped にしていると style が当てられない。

なので scoped を外して global にしようかと思ったが、そうすると今度は他のセレクタの命名を考慮しなくてはいけない。

さてどうする……と悩んでいたところに、「style タグを scoped と global のもの 2 つを 1 つの SFC ファイルに定義できますよ」というのを教えてもらったので、それでやったら簡単にできた。scoped なセレクタと global なセレクタを同じコンポーネントで定義できた。すごい。

<style lang="scss">
.hoge { ... }
</style>

<style lang="scss" scoped>
.fuga { ... }
</style>

こんな感じ。知らなかったので勉強になった。