Laravel Mix の webpack.mix.js を Storybook でも利用する

はじめに

Atomic Design ～堅牢で使いやすいUIを効率良く設計する 、この本があまりに素晴らしくて、写経をしたいので、その準備として Storybook を利用できるようにしました。

Storybook を導入したのですが、Laravel Mix で設定した CSS Modules が適用されていませんでした。

Storybook へ Laravel Mix の webpack.mix.js を取り込む方法がわかったので、記録に残します。

Storybook の webpack.config.js を用意

デフォルトで Storybook から読み込まれる .storybook の下に webpack.config.js を作成します。

ディレクトリ構成は以下のようになります。

.storybook/
    addons.js
    config.js
    webpack.config.js

webpack.config.js は以下の内容です。
laravel-mix の webpack.config.js を require しているのがポイントです。

const path = require('path');
// your app's webpack.config.js
const custom = require('../node_modules/laravel-mix/setup/webpack.config.js');

module.exports = async ({ config, mode }) => {
  return { ...config, module: { ...config.module, rules: custom.module.rules } };
};

これで完了です。
これで、 webpack.mix.js の設定内容が Storybook にも反映されているはずです！！

さいごに

ドキュメントを読めばなんとかなるもんだ！

これで Atomic Design ～堅牢で使いやすいUIを効率良く設計する の写経ができるぞ。

参考

- https://storybook.js.org/docs/configurations/custom-webpack-config/#using-your-existing-config