storybookを使ってコンポーネントの一覧を作成したかったが、bootstrapを使ったコンポーネントがうまく表示できなかったのを対処できたのでメモを残します。

経緯

webのフロントエンドの開発がしたい↓

フロントエンドのフレームワークを使おう↓

フロントエンドのフレームワークではReactがスタンダードだけど、Githubでスター数が伸びている且つ小さく始められるVue.jsにしよう↓

CSSフレームワークはとりあえず情報の多いbootstrapにしよう↓

コンポーネントの一覧が見られるstorybookが面白そうだから入れよう↓

bootstrapを使って作ったコンポーネントがうまく表示できない↓

なんとか表示できた←イマココ

対処内容

.storybook/config.jsに、vueのプロジェクトでbootstrapを適用した時と同じ内容を記述しました。

.storybook/config.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)