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

gaji-staff

2021.10.20

実践と知見

はじめに

こんにちは。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 を消して入れ直したり、パッケージのバージョンを見直してみてください。