Nuxt BuefyのグローバルCSS汚染を防ぐ

css統合用のmain.scssを作成。
nuxt-buefyのoptionsからcssの適用をfalseにします。

nuxt.config.js

  css: ['~/assets/scss/main.scss'],

  modules: [
    [
      'nuxt-buefy',
      {
        /* buefy options */
        css: false,
      },
    ],
  ],

グローバルcssを何かしらのクラスでラップします。
（今回は.bulmaというクラスを使います。）
.bulma クラス配下にbulma,　buefyのcssが展開されるようにimportします。

~/assets/scss/main.scss

// bulma
.bulma {
  @import '~bulma/bulma.sass';
  @import '~buefy/src/scss/buefy.scss';
}

buefyを使用するコンポーネントのrootに.bulmaクラスをつけることで
コンポーネント内部にのみbulma・buefyのcssが適用されます。

temp.vue

<template lang="pug">
  div.bulma
    b-field.grouped
      ~~