More than 1 year has passed since last update.

addon-styling からの移行対応版 Storybook7 の導入 Next.js 編

Last updated at 2024-01-09Posted at 2024-01-03

はじめに

Next.js に Storybook を導入しようとして、情報を様々に取り入れたが、色々と変更が加わっていた。
本記事は、Next.js に Storybook7 を導入するまでを記したものである。

環境

OS: macOS Sonoma 14.2.1
Next.js: 14.0.4
Storybook: 7.6.7
tailwindcss: 3.4.0

未確認だが、Windows 環境でもおそらく動作すると思われる。
Postcss を使用。CSS Modules については、本記事では明確な解決法は言及していないが、「おわりに」で記すリンクを参照してほしい。
npm 環境。以下は npm list コマンド実行時の出力。

% npm list
<パス省略>
├── @storybook/addon-essentials@7.6.7
├── @storybook/addon-interactions@7.6.7
├── @storybook/addon-links@7.6.7
├── @storybook/addon-onboarding@1.0.10
├── @storybook/addon-styling-webpack@0.0.5
├── @storybook/addon-themes@7.6.7
├── @storybook/blocks@7.6.7
├── @storybook/nextjs@7.6.7
├── @storybook/react@7.6.7
├── @storybook/test@7.6.7
├── @types/node@20.10.6
├── @types/react-dom@18.2.18
├── @types/react@18.2.46
├── autoprefixer@10.4.16
├── eslint-config-next@14.0.4
├── eslint-plugin-storybook@0.6.15
├── eslint@8.56.0
├── next@14.0.4
├── postcss@8.4.32
├── prettier-plugin-tailwindcss@0.5.10
├── prettier@3.1.1
├── react-dom@18.2.0
├── react@18.2.0
├── storybook@7.6.7
├── tailwindcss@3.4.0
└── typescript@5.3.3

原因

https://github.com/storybookjs/addon-postcss/issues/45
上の issue より。今まで Storybook7 の導入に使っていた addon-post-css が非推奨に。代わりに、addon-styling に移行。しかし、さらに addon-styling-webpack と addon-themes に分割されたため、addon-styling も非推奨となったようだ。
つまり、 addon-post-css -> sddon-styling -> addon-styling-webpack, addon-themes という移行をしたとのこと。

解決法 (It works for me)

以下のコマンドで、addon-styling-webpackage をインストール。
npm install @storybook/addon-styling-webpack

同じく、addon-themes のアドオンもインストール。
npm install @storybook/addon-themes

main.js ファイルに name:@storybook/addon-styling-webpack より下を追加。main.js は、.storybook ディレクトリ内に。addon-themes の追加を忘れずに。

    stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-onboarding",
        "@storybook/addon-interactions",

        // addons に以下を追加。addon-themes の追加も忘れずに。
        
+        "@storybook/addon-themes",
+        {
+            name: "@storybook/addon-styling-webpack",
+            options: {
+                rules: [
+                    // Replaces existing CSS rules to support PostCSS
+                    {
+                        test: /\.css$/,
+                        use: [
+                            "style-loader",
+                            {
+                                loader: "css-loader",
+                                options: { importLoaders: 1 },
+                            },
+                            {
+                                // Gets options from `postcss.config.js` in +your project root
+                                loader: "postcss-loader",
+                                options: {
+                                    implementation: require.resolve("postcss"),
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
    ],

PostCSS であれば上の文を追加するとよい。CSS Modules, Sass 等については、「おわりに」に記すリンクを参考に。

おわりに

公式ドキュメントをたどるとすぐ解決するものだったが、移行に伴って古い情報も混ざっていた。半年ほど前の記事でも addon-post-css を使っていたり。
GitHub に上がっていた issue の返信が2023年の10月6日だったので、比較的新しい情報ではあるが、Storybook の公式ドキュメントはしっかり更新されていたため、そちらを見るとよりスムーズに解決できたと予想。

解決しない場合や、yarn, pnpm コマンドでの実行等は、以下を参照。ドキュメントには npx add コマンドでの追加が記されている。
https://storybook.js.org/addons/@storybook/addon-themes
https://storybook.js.org/addons/@storybook/addon-styling-webpack

PostCSS 以外のツールについては、以下のページの Popular Configurations を参考に。
https://github.com/storybookjs/addon-styling-webpack

参考文献

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up