Next.js + cssModules(Sass) + Storybookの環境構築

Next.jsとcssModules(Sass) + Storybookの環境構築で中々ハマったので、記事に残しておきます。
これはmodule.cssでは起きない現象で、module.scssの時のみ起きるみたいです😇

前提知識

Next.js, TypeScriptの基礎
Next.jsをセットアップしている段階の話から進めていきます。

本ブログ記事であつかうライブラリーのバージョン

"sass": "^1.42.1",
"sass-loader": "^10.2.1",
"style-loader": "^1.3.0"
"css-loader": "^3.6.0",
"@storybook/addon-actions": "^6.4.10",
"@storybook/addon-links": "^6.4.10",
"@storybook/addons": "^5.3.22",
"@storybook/react": "^6.4.10"

Sassをinstall

npm i --save sass

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

npm i --save style-loader

ここのバージョンが重要なようで最新の11系をinstallするとバグるようなので必ず10系をinstallしましょう

npm i --save sass-loader@^10.2.1"

Storybookをinstall

npx sb init

これでまるっとStorybookのセットアップを完了させてくれます。

Storybookのmain.jsを修正する

セットアップしたままの状態ではsassのcssModulesをStorybookで使うことができません。
main.jsを少し書き換えてあげる必要があります。

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], // 読み込みたいファイル
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async(config) => {
    config.module.rules.push({
      test: /\.scss$/, // sassを読み込む
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            modules: {
              localIdentName: "[local]___[hash:base64:2]",
            },
          },
        },
        "sass-loader",
      ],
    });
    return config;
  }
};

preview.jsを書き換える

// - グローバルで使用しているsassファイルをimportしてあげる
import "../src/assets/styles/global/global.scss"
import "../src/assets/styles/global/mixins/mixins.scss"
import "../src/assets/styles/global/valiables/valiables.scss"
import "../src/assets/styles/global/reset.scss"

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
}

storiesファイルを作成する

main.jsで読み込んだstories ファイルを作成することにより、storybookに反映することができます。


例

src/components/atoms/AlertBox/AlertBox.stories.tsx

// - ライブラリー ================================
import React from "react";
import { ComponentStory, ComponentMeta } from '@storybook/react';

// - コンポーネント ==============================
import { AlertBox } from "./AlertBox";

export default {
  title: "AlertBox",
  component: AlertBox
} as ComponentMeta<typeof AlertBox>;

export const Error: ComponentStory<typeof AlertBox> = () => <AlertBox title="エラー" description="エラーの説明" alertType="ERROR"/>;

export const Info: ComponentStory<typeof AlertBox> = () => <AlertBox title="お知らせ" description="お知らせの説明" alertType="INFO"/>;

export const Success: ComponentStory<typeof AlertBox> = () => <AlertBox title="成功" description="成功の説明" alertType="SUCCESS"/>;

export const Warning: ComponentStory<typeof AlertBox> = () => <AlertBox title="警告" description="警告の説明" alertType="WARNING"/>;

npm run storybook

これで立ち上がるはずです。
お疲れさまでした！