storybookにbootstrap-vueを適応した

nuxt.jsを利用してる際にbootstrap-vueをインストールしたのですが、最初storybookには適応できていなかったので不思議に思い調べていました。

原因は至ってシンプルなものでしたが、何度も同じミスを自分でしそうだったので備忘録がてらメモします。

原因はstorybook側にbootstrap-vueが読み込まれていなかっただけです。
下記ファイルに以下を追加したら無事読み込まれるようになりました。

.storybook/config.js

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

なお、今回作成したstorybookはこちらになります。

宣伝

最近Webデザイナ向けのお役立ちサイトを作りました。よかったらこのサイトも御覧ください

この記事を書いた人

conti

名古屋在住のUIデザイナ。UIコンポーネントの設計と運用と素早くプロトタイプを作りながらフロントの実装するのが得意です。最近はReactを触るのとデザインシステムを作るのが好きです。コーギーと暮らしています。
プロフィール