##概要

Storybookは日本語のドキュメントが少なく、しかし、AtomicDesignで開発を進める上では重要度の高いものであります。
しかし、Storyファイルからコンポーネントを呼び出す際にいちいち相対パスを指定していては面倒で堪りません。
設定ファイルを変更することで、絶対パスを使用したエイリアス（Alias）での呼び出しが可能になります。

また、Storybookはプロジェクトからはある意味独立した構成となっています。
そのため、既存のバンドラーの設定ファイルとは別に設定を行わなければいけません。

環境

Node.js --v14.15.4
Vue/cli --v4.5.4
Storybook --v6.1.17

方法

(プロジェクト)／.storybook ／main.js　を以下のように編集する

module.exports内に以下を追加

webpackFinal: async (config) => {
    config.resolve.alias = {
    	...config.resolve.alias,
    	"@atoms": path.resolve(__dirname, "../resources/js/components/Atoms"),
        "@molecules": path.resolve(__dirname, "../resources/js/components/Molecules"),
	};

(( ﾟДﾟ)

Webpackをフルコントロールモードで使用する方法（.Storybook下にwebpack.config.jsを作成するもの）、既存のWebpack、Laravel.mixの設定を参照しStorybookに流用する方法もあります。
今回は、Storybookの設定を変更しエイリアスを設定する方法を紹介しました。