Vue.jsでBootstrapを利用する方法と、Bootstrapをカスタマイズする方法

はじめに

Vue.jsでBootstrapを利用する方法です。

利用する方法はいろいろあり、
Bootstrapの利用したい機能の範囲などによっても
適切な導入方法が違ったりすると思います。

利用方法の1つの例として参考にしてください。

Bootstrapを利用可能な状態にする

sass-loaderインストール

Vue.jsでsassをコンパイルするために必要なパッケージをインストールします。

npm install sass-loader node-sass

bootstrap-vueインストール

Vue.jsでbootstrapを利用するために用意されているパッケージをインストールします。

npm install bootstrap-vue

main.jsで有効化

インストールしたbootstrap-vueを利用可能な状態にします。
main.jsに下記5行を追記します。

main.js

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

これでbootstrapが利用可能な状態です。

bootstrapのコードを記述

実際にbootstrapが使える状態かどうか確認します。
こんな感じで適当にbootstrapのコードを書いてみましょう。

    <b-button size="lg" variant="outline-primary">
      Bootstrap Button
    </b-button>
    <b-button size="lg" variant="danger">
      Bootstrap Button
    </b-button

正しくbootstrapのボタンが表示されていればOKです。

テーマカラーなどをカスタマイズ可能な状態にする

さらに、bootstrapをカスタマイズ可能な状態にするための設定も行います。

カスタマイズ用scss作成

カスタマイズのコードを記述するためのファイルを作成します。
assetsなどのディレクトリ配下に
bootstrap-custom.scss を作成し下記のように記述してください。

assets/scss/bootstrap-custom.scss

$primary: green;

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';

これは、本来は青色であるprimaryの色を、緑色に変更しています。
他にもカスタマイズしたい場合はこの
$primary: green; の下にコードを並べていきます。

カスタマイズファイルを有効化

main.jsで、先ほどimportした2つのbootstrapのcssではなく、
今回追加したカスタマイズ用のscssをimportします。

main.js

// import "bootstrap/dist/css/bootstrap.css";
// import "bootstrap-vue/dist/bootstrap-vue.css";
import "./assets/scss/bootstrap-custom.scss"

これで先ほどのボタン表示を再確認してみてください。
primaryのボタンの色が緑になっていればカスタマイズ成功です。

カスタマイズ方法

下記ファイルに、カスタマイズ可能な変数がたくさん定義されています。
node_modules/bootstrap/scss/_variables.scss

テーマカラーや背景色、ボーダーの太さなどいろいろ定義されているので、
変更したい変数を bootstrap-custom.scss で上書きすることで、
カスタマイズすることができます。

参考

https://bootstrap-vue.org/docs/reference/theming#theming-bootstrap--bootstrapvue
https://getbootstrap.com/docs/4.5/getting-started/theming/