Zenn
🦉

Next.js+CSSModules(Saas)+Storybookのセットアップ

2021/07/03に公開
1件
JavaScript
Next.js
React
Storybook
TypeScript
tech

Next.js のプロジェクトにCSSModules(Sass)+Storybookをセットアップしようとしてハマり倒したので手順を記録しておきます。
セットアップ完了状態のソースはこちら
https://github.com/TakahiroHimi/Next-CSSModules-SB-sample

Next.js アプリ作成

npx create-next-app --example with-typescript myapp

CSSModules(Sass)セットアップ

パッケージ追加

yarn add sass

以下の通りファイルを作成・編集

/styles/global.scss
:root {
  --c-primary: #3ea8ff;
}
/styles/variables.scss
$breakpoints: (
  "sm": 576px,
  "md": 768px,
  "lg": 992px,
  "xl": 1200px,
);

@mixin mq($size) {
  @media screen and (max-width: #{map-get($breakpoints, $size)}) {
    @content;
  }
}
/pages/_app.tsx
import "../styles/global.scss";

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}
/pages/index.scss
@import "../styles/variables.scss";

.button {
  background-color: var(--c-primary);

  @include mq(md) {
    background-color: red;
  }
}
/pages/index.tsx
import styles from "./index.module.scss";

const IndexPage = () => (
  <>
    <button className={styles.button}>Click me</button>
  </>
);

export default IndexPage;

起動確認

yarn run dev

Storybook セットアップ

セットアップコマンド実行

npx sb init

sass-loader 追加

一番ハマった箇所
最新版だと storybook 起動時にコケるので 10 系を入れる

yarn add -D sass-loader@^10.0.0

設定ファイル編集

※以下内容についてはこちらの記事を参考にしています。

/.storybook/main.js
module.exports = {
  stories: ["../**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (baseConfig) => {
    baseConfig.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            modules: {
              localIdentName: "[local]___[hash:base64:2]",
            },
          },
        },
        "sass-loader",
      ],
    });
    return { ...baseConfig };
  },
};
/.storybook/preview.js
+ import "../styles/global.scss";
+ import "../styles/variables.scss";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

story ファイル作成

/pages/index.stories.tsx
import { Meta, Story } from "@storybook/react";
import React, { ComponentProps } from "react";
import Index from "./index";

export default {
  title: "Index",
  component: Index,
} as Meta;

export const Default: Story<ComponentProps<typeof Index>> = () => <Index />;

起動確認

yarn storybook

End

Next.js に CSSModules(Sass)+Storybook をセットアップする記事はいくつか見つけましたが、
執筆時点(2021/07/03)では Storybook でスタイル確認できる状態までたどり着ける方法を見つけることはできませんでした。
こちらの Issueで sass-loader のバージョンに 10 系を指定していたため参考にしたところなんとかセットアップすることができました。
ソースもサンプルとしてあげておきましたので、困っている方の役に立てば幸いです。

この記事は VSCode の Zenn 執筆支援拡張機能を使用して記述しました。
大変使いやすいので VSCode で執筆する方は是非。
https://zenn.dev/negokaz/articles/aa4e12b76d516597a00e

参考

https://zenn.dev/catnose99/scraps/5e3d51d75113d3
https://qiita.com/miyawa-tarou/items/3f6166e7b617634e6a1c
https://github.com/storybookjs/storybook/issues/12464
https://gist.github.com/justincy/b8805ae2b333ac98d5a3bd9f431e8f70

Discussion