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

## 対象

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

## 簡単インストール方法

index.html に追記

### プロジェクト作成

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

プラグインは適当に
_Css Pre-processors_ は必須

### Buefy インストール

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

```
yarn add -D buefy
```

- main.js を修正

```javascript: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:vue-buefy-sample/src/components/HelloWorld.vue
<template>
  <div class="hello">
    <b-button type="is-primary">テスト</b-button>
    <h1>{{ msg }}</h1>

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

![スタイル変更前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/50eeaac7-3d9e-e1fc-7cfb-be09ea07a383.png)

### 簡単解説

- b-button
  [b-button](https://buefy.org/documentation/button)は Buefy のボタンコンポーネントで
  main.js にて Vue.use で Buefy を登録したことで、main.js に紐づくコンポーネント全てで利用できる

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

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

**_ここからが本題_**
[ここ](https://buefy.org/documentation/customization)に書いてあるように scss ファイルを自分で定義することで各コンポーネントに当てられているスタイルを変更することができる

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

### \_buefy.scss を作成

> [公式](https://buefy.org/documentation/customization)のソースコードより一部抜粋

```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 を作成

```scss:vue-buefy-sample/src/assets/styles/_buefy.scss
@import 'buefy';

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

```vue:vue-buefy-samplevue-buefy-sample/src/App.vue
<style lang="scss">
@import '@/assets/styles/app'; // 追加

~~
</style>
```

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

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

> _buefy.scssから一部抜粋

```diff: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の指定を作成したスタイルに変更

```diff: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>
```

### 確認

![スタイル変更後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461616/0724d720-6312-815e-7286-2a20fb27beb8.png)


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

変更することができる変数は[Bulma 公式ドキュメント](https://bulma.io/documentation/customize/variables/)に記載されている

## 後書き

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

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

[buefy]: https://buefy.org/