vue-cliを使ってサクッとお試しで触ろうと思ったのにハマってしまったのでまとめておきます。
環境はvue-cli uiを使ってインストールしました。
環境
| CLI Or CLI-PLUGIN | インストールされたライブラリ | バージョン |
|---|---|---|
| vue-cli(3.4.0) | vue | 2.6.2 |
| vue-cli-plugin-storybook(0.5.1) | @storybook/vue | 4.1.11 |
| vue-cli-plugin-vuetify(0.4.6) | vuetify | 1.5.0 |
設定
config/storybook/config.js
// 以下のコードを追加する
import Vue from 'vue';
// webpackで読み込めるように、ビルドされたmin.jsとmin.cssを読み込む
import Vuetify from 'vuetify/dist/vuetify.min';
import 'vuetify/dist/vuetify.min.css';
// Themeの設定を行っている場合は同様の設定を行う。
Vue.use(Vuetify, {
iconfont: 'md',
});
config/storybook/config.js
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>
補足
vue-cli-plugin-vuetifyを使ってインストールすると、下記のようなsrc/plugins/vuetify.tsが作成される
vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';
Vue.use(Vuetify, {
iconfont: 'md',
});
TypeScriptプロジェクトの場合、storybookのwebpackでビルドできないので、Vuetifyが使用できない。ビルド後のjs, cssを読み込むことで回避可能。
最後に
storybookの4系だとwebpackのデフォルトを上書きしたいのに、webpack.configがどこにあるかわからない...