Zenn
Closed1

App Router x CSS Modules に Storybook 追加

Next.js
Storybook
takky94takky94

基本は npx storybook@latest initだけで動作が見込めたものの、一部style周りでエラーが出た
アドオンとかもinitコマンドで流れ込んでくるもののみで特に他に入れなくて済んだ

# 環境
    "next": "^13.4.7",
// ...
    "@storybook/addon-essentials": "^7.0.27",
    "@storybook/addon-interactions": "^7.0.27",
    "@storybook/addon-links": "^7.0.27",
    "@storybook/blocks": "^7.0.27",
    "@storybook/nextjs": "^7.0.27",
    "@storybook/react": "^7.0.27",
    "@storybook/testing-library": "^0.0.14-next.2",
// ...
    "sass": "^1.63.6",

cssが

src/app/styles
├── constants.scss
├── index.scss # entry point
├── mixins.scss
├── functions.scss
└── variables.scss

みたいな構成で、各.module.scssから@use "@styles" as *と呼び出してる
（tsconfigで"@styles": ["./src/app/styles/index.scss"]みたいなaliasとして登録済み）

で、起動するとsrc/app/globals.scssの@use部分でエラーが出る
下記のようにstorybookでも定義してあげると治った

// .storybook/main.ts

+ const path = require('path')
+ const rootPath = path.resolve(__dirname, '../src/')

  const config: StorybookConfig = {
    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
    framework: {
      name: '@storybook/nextjs',
      options: {},
    },
    docs: {
      autodocs: 'tag',
    },
    staticDirs: ['../public'],
+    webpackFinal: async (config) => {
+      config.resolve = {
+       ...config.resolve,
+       alias: {
+         ...config.resolve?.alias,
+         '@styles': `${rootPath}/app/styles/index.scss`,
+       },
+     }
+     return config
+   },
  }
  export default config
このスクラップは2023/08/01にクローズされました