【Buefy】インストール〜独自のスタイルを当てるまで

対象

• Vue.js の UI コンポーネントである Buefy をプロジェクトに導入したい人
• Buefy のスタイルを自分の好みに変更したい人

簡単インストール方法

index.html に追記

プロジェクト作成

vue create vue-buefy-sample
cd vue-buefy-sample
yarn serve

プラグインは適当に
Css Pre-processors は必須

Buefy インストール

• buefy パッケージをインストール

yarn add -D buefy

• main.js を修正

src/main.js

import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy' // 追加

Vue.config.productionTip = false
Vue.use(Buefy) // 追加

new Vue({
  render: (h) => h(App),
}).$mount('#app')

これだけ！

確認

vue-buefy-sample/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <b-button type="is-primary">テスト</b-button>
    <h1>{{ msg }}</h1>

    <!-- 以下の余計な物を削除 -->
  </div>
</template>

簡単解説

• b-button
  b-buttonは Buefy のボタンコンポーネントで
  main.js にて Vue.use で Buefy を登録したことで、main.js に紐づくコンポーネント全てで利用できる

• type="is-primary"
  Buefy のコンポーネント全般で使える type 要素は色を主に指定することができる
  is-primary と指定すると初期状態では Buefy のテーマカラーである#8c67ef で表示される
  他にも is-light や is-dark 等がある
  これらは以下の方法でカスタマイズすることができる

スタイルをカスタマイズしたい場合

ここからが本題
ここに書いてあるように scss ファイルを自分で定義することで各コンポーネントに当てられているスタイルを変更することができる

app.scss を経由してるのは 別の scss ファイルを全体に当てたい場合に流用できるおすすめの方法

_buefy.scss を作成

公式のソースコードより一部抜粋

vue-buefy-sample/src/assets/styles/_buefy.scss

// Import Bulma's core
@import '~bulma/sass/utilities/_all';

// Set your colors
$primary: #8c67ef;
$primary-invert: findColorInvert($primary);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  'primary': (
    $primary,
    $primary-invert,
  ),
);

// Import Bulma and Buefy styles
@import '~bulma';
@import '~buefy/src/scss/buefy';

app.scss を作成

vue-buefy-sample/src/assets/styles/_buefy.scss

@import 'buefy';

// @import "global"; // 将来的に_global.scssとかを作った時にこんな風に追加できる

vue-buefy-samplevue-buefy-sample/src/App.vue

<style lang="scss">
@import '@/assets/styles/app'; // 追加

~~
</style>

スタイルを変更するための準備

$colors に追加すると、type 要素に is-<追加したキー>で指定するとその色にすることができる

_buefy.scssから一部抜粋

vue-buefy-sample/src/assets/styles/_buefy.scss

 // Set your colors
 $primary: #8c67ef;
 $primary-invert: findColorInvert($primary);

+$secondary: red;
+$secondary-invert: findColorInvert($secondary);

 // Setup $colors to use as bulma classes (e.g. 'is-twitter')
 $colors: (
   'primary': (
     $primary,
     $primary-invert,
   ),
+  'secondary': (
+    $secondary,
+    $secondary-invert,
+  ),
 );

typeの指定を作成したスタイルに変更

vue-buefy-sample/src/components/HelloWorld.vue

 <template>
     <div class="hello">
-        <b-button type="is-primary">テスト</b-button>
+        <b-button type="is-secondary">テスト</b-button>
         <h1>{{ msg }}</h1>
     </div>
 </template>

確認

簡単にスタイルを追加・変更することができる

変更することができる変数はBulma 公式ドキュメントに記載されている

後書き

Buefy は導入も修正も楽にマテリアルデザインを実装できるのでとてもおすすめ
今後 Buefy の便利な点や使うコツなどを書いていこうと思います

今回のソースは github に上げていますのでご活用ください
https://github.com/azuharu07/vue-buefy-sample/commit/ac36eccde55b333948d43e9960f75765c8f7c8d8