【Gatsby.js】Storybook導入した際にハマったエラー

Gatybyの公式手順に則ってStorybookを導入した際に下記のエラーが発生して、苦しんだのでメモ。

エラー内容

公式手順に沿ってインストール進めて

yarn storybook

を実行すると下記のエラーが、、

DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

和訳

• デフォルトのPostCSSプラグインは非推奨
• @ storybook / addon-postcss'に切り替えるときは、 'postcss-flexbugs-fixes'や 'autoprefixer'などの独自のプラグインを追加する必要がある。
  と言われている。

解決法

といことで、Storybook公式サイトを参考に

1.Storybook PostCSSアドオンを追加。

yarn add -D @storybook/addon-postcss

2.上記でインストールしたアドオンの読み込み

.storybook/main.js内のアドオンに'@storybook/addon-postcss'を追加。

これで

yarn storybook

を実行！！

無事にStorybookが立ち上がりました。

このエラーが発生した根本の原因がGatsby側にあるのか不明なので分かる方はコメントいただけると嬉しいです。

補足

• TypeScriptのサポート、ストーリーブックバージョン4に関する設定は追加していない。
• Gatsby特有のエラーなのかは不明。