vuejs

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

はじめに

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

Vue.jsアプリの見た目を良くするコンポーネントセットBuefyを使うための準備

BuefyはBulmaというUIコンポーネントセットをベースにしたVue.js用のUIコンポーネントセットです。Bootstrapのようにあらかじめ用意されたHTMLタグやCSSクラスを使うことで簡単にそれなりの見た目になります。ここでは、Vue.jsアプリでBuefyを使えるようにするための準備手順と、最後にmarginやpadding用のクラスをBeufyに追加する方法をメモします。

前提と環境

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

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

nuxt-buefyの公式リポジトリは以下です。

Nuxt Buefy

It’s really very simple to start with nuxt. But we can make it even simpler by adding nuxt-buefy.

事前準備

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

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

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

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

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

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の記述を加えます。

assets/style.scss@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)で定義されているスタイルの変数は以下の公式ドキュメントに記載されています。

Variables

Create your own theme with a simple set of variables

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

Functions

An overview of what Bulma as a framework is all about

nuxt.config.jsを編集する

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

nuxt.config.js/*
  ** Global CSS
  */
  css: [ '~/assets/style.scss' ],
(...以下省略...)

まとめ

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

SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。