Next.js+CSS Modules(scss含む) で Storybook の環境構築をする

はじめに

こんにちは。kimizuy です。

Storybook の環境構築って大変ですよね。

今回は Next.js+CSS Modules プロジェクトで Storybook が見られるように、サンプルをクローンして Storybook を立ち上げるまでをご紹介します。

また .module.css は特に設定が不要なのですが .module.scss での設定に関する情報はあまりないので、こちらをメインに紹介します。

本記事で紹介する設定方法は Webpack5 をベースにしています。

tldr

環境構築済みのリポジトリです。

with-storybook-css-modules-app

サンプルリポジトリをクローンする

ではさっそく導入手順を紹介します。

本記事では Next.js の with-storybook をベースに作業します。

適当なディレクトリで以下のコマンドを実行します。

npx create-next-app --example with-storybook with-storybook-app

クローンできたら試しに Storybook を立ち上げてみましょう。

yarn storybook

必要なパッケージを追加する

まずは .module.scss ファイルが使えるように sass を追加します。Next.js はこのパッケージを追加するだけで Sass が使えるようになります。

yarn add sass

次に Storybook 関連のパッケージを追加します。with-storybook@storybook/* のバージョンは固定されているので、これらも改めて最新バージョンを入れ直します。

yarn add -D @storybook/react @storybook/addon-essentials @storybook/addon-links @storybook/builder-webpack5 @storybook/manager-webpack5 css-loader sass-loader style-loader

package.json は以下のようになります。

{
  ...

   "dependencies": {
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.43.2"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/builder-webpack5": "^6.3.12",
    "@storybook/manager-webpack5": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "babel-loader": "^8.0.5",
    "css-loader": "^6.4.0",
    "sass-loader": "^12.2.0",
    "serve": "11.3.2",
    "style-loader": "^3.3.0"
  }
}

Storybook の main.js を修正する

sass 記法と CSS Modules が読み込めるように .scss ファイルを処理します。

以下のように .storybook/main.js の内容を修正します。

const path = require('path')

module.exports = {
  stories: ['../stories/*.stories.@(ts|tsx|js|jsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: {
              auto: true,
            },
          },
        },
        'sass-loader',
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  },
  core: {
    builder: 'webpack5',
  },
}

最新の Webpack loader 類は Webpack5 を使うことを前提にしています。そのため Storybook でも Webpack5 を使えるようにする必要があり、以下の設定を追加しています。ただ、現在の v6.3 の時点では experimental の状態です。

core: {
  builder: 'webpack5',
}

yarn storybook してみる

以下のようにファイルを追加・修正して実際に Storybook を立ち上げてみましょう。

// components/home.module.scss

.bgBlue {
  background-color: blue;
}
// components/index.js

import styles from './home.module.scss'

export default function Home() {
  return <div className={styles.bgBlue}>Hello World</div>
}

上手くいかない場合は node_modules を消して入れ直したり、パッケージのバージョンを見直してみてください。

参考

Configure Storybook to work with Next.js, TypeScript, and CSS Modules

さいごに

Webpack4 -> 5 への過渡期なのか、あまり環境構築の情報がなくて大変でした。

本記事が誰かのお役に立てれば幸いです!

この機会に、オンラインで気軽に面談してみませんか?

現在弊社では一緒にお仕事をしてくださるエンジニアさんやデザイナーさんを積極募集しています。まずはカジュアルな面談で、お互いに大事にしていることをお話できたらうれしいです。詳しい応募要項は以下からチェックしてください。

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!

投稿者 Yamasaki Kimizu

React, Redux, TypeScript プロジェクトでフロントエンド領域を担当。個人でも Next.js アプリの開発をしています。日課はRSSで取得した技術記事を読むこと、最近の関心は Core Web Vitals です。将来はでかい犬が飼いたいです。