Storybook with react-scripts@next and css modules

Question

I tried react-scripts@next 2.0.0-next.66cc7a90 (create-react-app v2) because support for css modules has been added. Unfortunately, css modules are ignored by storybook. Any quick fix I could do?

Answer 1

My solution was to create a webpack.config.js in the .storybook folder to enable css modules.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.module\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: false,
            },
          },
        ],
      },
      {
        test: /\.module\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

Answer 2

Use Storybook preset addon to add CSS Modules capabilities.

How to use css-modules with storybook 6

Installation

npm install -D storybook-css-modules

Configuration

Next, update .storybook/main.js to the following:

// .storybook/main.js

module.exports = {
  stories: [
    // ...
  ],
  addons: [
    // Other Storybook addons

    "storybook-css-modules", // 👈 The addon registered here
  ],
};