Next.jsとcssModules(Sass) + Storybookの環境構築で中々ハマったので、記事に残しておきます。 これはmodule.cssでは起きない現象で、module.scssの時のみ起きるみたいです😇 <h2 id="h8de6a2a24f">前提知識</h2> Next.js, TypeScriptの基礎 Next.jsをセットアップしている段階の話から進めていきます。 <h2 id="h94142d6374">本ブログ記事であつかうライブラリーのバージョン</h2> <pre><code>"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"</code></pre> <h2 id="heaf63c57ee">Sassをinstall</h2> <pre><code>npm i --save sass</code></pre> <h2 id="h362762d26f">必要なパッケージを追加する</h2> <pre><code>npm i --save style-loader</code></pre> ここのバージョンが重要なようで最新の11系をinstallするとバグるようなので必ず10系をinstallしましょう<pre><code>npm i --save sass-loader@^10.2.1"</code></pre> <h2 id="hfd27f386ab">Storybookをinstall</h2> <pre><code>npx sb init</code></pre> これでまるっとStorybookのセットアップを完了させてくれます。 <h2 id="hb9d3259058">Storybookのmain.jsを修正する</h2> セットアップしたままの状態ではsassのcssModulesをStorybookで使うことができません。 main.jsを少し書き換えてあげる必要があります。 <pre><code>// .storybook/main.js
module.exports = {
 stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], // 読み込みたいファイル
 addons: ['@storybook/addon-actions', '@storybook/addon-links'],
 webpackFinal: async(config) =&gt; {
 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;
 }
};</code></pre> <h2 id="h5697d7df11">preview.jsを書き換える</h2> <pre><code>// - グローバルで使用している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].*' },
}</code></pre> <h2 id="h9945e07638">storiesファイルを作成する</h2> main.jsで読み込んだstories ファイルを作成することにより、storybookに反映することができます。 例 src/components/atoms/AlertBox/AlertBox.stories.tsx <pre><code>// - ライブラリー ================================
import React from "react";
import { ComponentStory, ComponentMeta } from '@storybook/react';

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

export default {
 title: "AlertBox",
 component: AlertBox
} as ComponentMeta&lt;typeof AlertBox&gt;;

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

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

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

export const Warning: ComponentStory&lt;typeof AlertBox&gt; = () =&gt; &lt;AlertBox title="警告" description="警告の説明" alertType="WARNING"/&gt;;</code></pre> <pre><code>npm run storybook</code></pre> これで立ち上がるはずです。 お疲れさまでした！

"storybook"の記事一覧