• UIカタログ

• 年々フロントエンドでできることが増え、複雑になった（複数デバイスへの対応やリッチなグラフィック表現、非同期処理など）ため、コンポーネント数が無限に増えていくので管理できない
• コンポーネントを確認するにはローカルサーバーやコンテナを起動し、ブラウザで確認する必要があるので、かなり面倒
• propsの値やイベントハンドラもコンポーネントファイルを逐一開き、コードを確認する必要があった
  これらを解決するために誕生

• コンポーネントを確認するためにローカルサーバーを立ち上げなくても良くなる
• プロップスを動的に変更できるのでスタイルの確認が瞬時にできる
• いろいろテストできる

• コンポーネントの状態をキャプチャしたもの（渡されるプロップスによってスタイルが変更するなどのパターンを登録する）

1. .storybook/preview.ts で srcディレクトリ直下のindex.css をインポート
2. yarn add -D @storybook/addon-postcss をインストール
3. yarn add -D postcss@^8 をインストール（PostCSS v8の場合のみ）
   • .storybook/main.ts に以下を追記

     const config: StorybookConfig = {
       addons: [
         "@storybook/addon-links",
         "@storybook/addon-essentials",
         "@storybook/addon-interactions",
     		//追加
         {
           name: '@storybook/addon-postcss',
           options: {
             postcssLoaderOptions: {
               implementation: require('postcss'),
             },
           },
         },
       ],
     };
     

https://storybook.js.org/addons/@storybook/addon-postcss