Chapter 04

[基本編] .storybook/main.js の作成

Storybook 6 では、その設定ファイルを .storybook ディレクトリに配置します。

特に、 .storybook/main.js は、 Storybook の起動に必須の設定ファイルで、ここに基本的な構成を記述します。

$ mkdir .storybook

では、必要最低限の .storybook/main.js を書いてみましょう

.storybook/main.js
const path = require('path')

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  webpackFinal: config => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../')
    })
    return config
  }
}

.storybook/main.js では、 Storybook 全体の設定をオブジェクトで定義します。

stories には、各ストーリーを宣言する storiesファイル がどこにあるかを blob 形式の文字列のリストで渡します。

今回は src/components ディレクトリ以下の、 .vue ファイルと同じ階層に .stories.js ファイルを配置するため、相対パスで上記のように宣言します。

また、webpackFinal に関数を渡すことで、 Storybook が内部で使用している Webpack の設定を拡張することができます。

本書では、Vueコンポーネント内で scss を使用しているため、Storybookでも同様に scss を解決できるようにルールを追加します。 (これに関しては Storybook の本筋から逸れるのであまり気にしなくても大丈夫です)

.storybook/main.js を作成したことにより、Storybookが起動できるようになります。

$ yarn storybook

無事に Storybook が立ち上がりましたが、まだ肝心のstoriesファイルを作成していないので、表示するストーリーがない旨のメッセージが表示されています。

それではストーリーを作成する準備が整ったので、次回からようやく .stories.js ファイルを作っていきます。