스토리북에서 CSS Modules 사용하기

예전에 도입하려다 실패했던 스토리북을 최근에 다시 시도해서 성공했다. 근데 의외로 CSS Modules가 작동하지 않는다. css-loader를 사용하면 기본값이 활성화인데 스토리북에서 굳이 꺼둔 건가...? 아무튼 해결 방법을 찾아서 올려놓는다.

.storybook/main.js 파일을 열고 아래처럼 webpackFinal에 CSS Modules 지원 관련 코드를 추가한다.

const path = require('path');

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  webpackFinal: async (config) => {
    // CSS Modules 지원 추가
    config.module.rules.find(
      (rule) => rule.test.toString() === '/\\.css$/'
    ).exclude = /\.module\.css$/;

    config.module.rules.push({
      test: /\.module\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
};

출처: https://stackoverflow.com/questions/70042915/how-to-use-css-modules-with-storybook-6