Storybook を CSS Modules + Next.js プロジェクトに導入する際にハマったこと

環境

• next 10.0.6
• @storybook/react 6.1.21
• @storybook/preset-scss 1.0.3
• css-loader 3.6.0
• sass-loader 10.1.1

(多いな)

Storybook を CSS Modules + Next.js プロジェクトに導入したい

ドキュメントに従って、npx sb init するだけでは駄目だったのでハマった点を書く。

.storybook/main.js の webpackFinal で色々しない

ググると .storybook/main.js の webpackFinal で色々して解決する事例が出てくる。これはあんまりやりたくない。 もう少し調べてみたら今は @storybook/preset-scss という addon を使えば自分でコードを書かなくてもいいということが分かった。あぶない。

@storybook/preset-scss がインストールできない

別の記事に書いた。

pokuwagata.hatenablog.com

TypeError: this.getOptions is not a function at Object.loader

v11 系の sass-loader を使うとこのエラーが出てビルドできない。

stackoverflow.com

$ npm i -D sass-loader@10.1.1

すると直る。

cssLoaderOptions を正しく設定する

Install addons に従って .storybook/main.js を設定しておけば良いのかと思いきや css-loader v3 系を使用すると以下のエラーが出てしまう。

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:

正しくは、こういう感じになる。

module.exports = {
  stories: ["../{pages,components}/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          modules: { localIdentName: "[name]__[local]--[hash:base64:5]" },
        },
      },
    },
  ],
};

v3 から localIdentName オプションの位置が変更になっている。

github.com

storybookjs/presets にはプルリクも出されているんだがまだ対応されていない。 github.com

参考

• StorybookをNext.js + Chakra UIのサイトに導入 | suzukalight.com