Nuxt.jsで使っているBuefyのスタイルをカスタマイズする

はじめに

Nuxt.jsでBuefyを使っており、部分的にスタイルをカスタマイズしたい場面がありました。この記事では、Nuxt.jsで使っているBuefyのスタイルをカスタマイズする方法をまとめます。 もしBuefyについて興味がある方は、以下に使い方などをまとめているので見てみてください。

前提と環境

ここでは、Nuxt.jsにnuxt-buefyをインストールして使っている前提です。

• Nuxt.js : 2.9.0
• nuxt-buefy: 0.3.14

事前準備

はじめにオリジナルのSCSSファイルをコンパイルして読み込めるようにするためにnode-sassとsass-loaderの２つをインストールしておきます。

$ npm install node-sass sass-loader --save

以上で事前準備は完了です。

オリジナルのSCSSファイルを作成する

自身のNuxt.jsアプリのルートディレクトリに、assetsというディレクトリが存在すると思います。このassetsの中に、style.scssという名前のファイルを新しく作成し、中身を以下のようにします。

@import '~bulma/sass/utilities/_all';
$primary: #225193;
$success: #3cb371;

@import '~bulma';
@import '~buefy/src/scss/buefy';

上記では、Buefyにデフォルトで用意されている$primary、$successの色を変更しています。なお、Buefy（Bulma）では、is-primaryのようなCSSクラス名も多数用意されています。例えば、以下です。

<a class="button is-primary">Primary</a>

自身で作成したSCSSファイルで$primaryの色を変更しても、上記のようにis-primaryのようなCSSクラスの色までは変更されません。 もしCSSクラスの色も変更した色を反映させたい場合は、以下のように$colorsの記述を加えます。

@import '~bulma/sass/utilities/_all';

$primary: #225193;
$primary-invert: findColorInvert($primary);
$success: #3cb371;
$success-invert: findColorInvert($success);

$colors: (
  "primary": ($primary, $primary-invert)
  "success": ($success, $success-invert)
);
@import '~bulma';
@import '~buefy/src/scss/buefy';

上記ではついでに$primary-invert、$success-invertも設定しています。この「invert」とついているのは、例えばボタンで背景色とテキスト色を反転させた場合の色です。 なお、Buefy（Bulma）で定義されているスタイルの変数は以下の公式ドキュメントに記載されています。

また、findColorInvert関数については以下の公式ドキュメントに記載されています。

nuxt.config.jsを編集する

あとは作成したSCSSファイルを、nuxt.config.jsで読み込むように記述します。具体的には、以下のようにcss部分に作成したSCSSファイルのパスを追記します。

/*
  ** Global CSS
  */
  css: [ '~/assets/style.scss' ],
（...以下省略...）

まとめ

BeufyはWebアプリとして必要となりそうな要素や機能、スタイルも十分揃っているのでおすすめです。