Can I use CSS Modules with Storybook 5 (React flavour)?

Question

I am trying to use Storybook v5.0 with my project and I am using React + Webpack4 + CSS Modules. ( I am not using CreateReactApp)

My setup is quite simple, and I was able to setup Storybook without CSS modules fine.

However if I try to edit the custom storybook webpack config to support CSS modules, it errors.

When I run npm run storybook the error I get is:

ERROR in ./src/components/Test/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src!./src/components/Test/index.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js!./index.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

In my package.json:

"@storybook/addon-actions": "^5.0.0",
"@storybook/addons": "^5.0.0",
"@storybook/react": "^5.0.0",

My .storybook/webpack.config.js follows the example on their web site, and looks like this:

const path = require("path");

const stylesLoaders = [
  "style-loader",
  {
    loader: "css-loader",
    options: {
      modules: true,
      localIdentName: "[path]__[local]--[hash:base64:5]"
    }
  },
  "postcss-loader"
];

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: stylesLoaders,
        include: path.resolve(__dirname, "../")
      }
    ]
  }
};

Any help would be appreciated, as I'd like to use the latest version of Storybook!

Afroasiatic

Hey, I'm struggling with the same issue.. Got any solution ? @Afroasiatic – Inextensible

If you want to use full control mode you probably have to remove some default rules that collide with yours. Follow this example here and the whole conversation: github.com/storybooks/storybook/issues/… – Meandrous

Answer 1

This is what worked for me:

// ./.storybook/main.js
module.exports = {
  //
  webpackFinal: (config, {configType}) => {
    const path  = require('path');

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

AND

Renaming my CSS files from <filename>.css to <filename>.module.css.

Good Luck...

Tearjerker

css-loader?modules=true is a nice shortcut for configuring options. thanks for sharing! – Made

Answer 2

I had the same issue with the new storybook ( v5 ). Finally i made it work after i had to spread config and config.module in the .storybook/webpack.config.js

Accordingly with Storybook's documentation, i used a function for webpack rather than an object: https://storybook.js.org/docs/configurations/custom-webpack-config/

Here is an exemple :

module.exports = ({ config }) => ({
  ...config,
  module: {
    ...config.module,
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use:[
          {
            loader: require.resolve("babel-loader"),
            options: {
            presets: [["react-app", { flow: false, typescript: true }]]
            }
          }
        ],
        include: path.resolve(__dirname, "../")
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: { sourceMap: true }
          },
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: "[name]__[local]__[hash:base64:5]"
            }
          },
          {
            loader: require.resolve("postcss-loader"),
            options: {
              ident: "postcss",
              plugins: () => [
                require("postcss-flexbugs-fixes"),
                require("postcss-inline-svg"),
                require("postcss-svgo"),
                autoprefixer({
                  browsers: [
                    ">1%",
                    "last 4 versions",
                    "Firefox ESR",
                    "not ie < 9"
                  ],
                  flexbox: "no-2009"
                })
              ]
            }
          }
        ],
        include: path.resolve(__dirname, "../")
      }
    ]
  }
});

I hope it will help you :)

Carton

Welcome to SO. Please do not post question as answer. As you may not have enough reputation to comment, you could upvote the question – Pug

Look like the post is not correctly edited to be an answer. Please don't downvote since is a possible valid answer like is explained in the official storybook change log: github.com/storybooks/storybook/blob/next/… – Meandrous

Answer 3

I had the same issue with the new storybook (v6). Finally, I am able to resolve the error when I applied this solution

https://github.com/GVanderLugt/storybook-next-antd-less-typescript-config/blob/master/.storybook/next-preset.js

Many thanks to him!

Albion

This was a big help–thank you very much! – Pretzel

Answer 4

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
  ],
};

Swirl