storybook: Storybook default webpack config does not support CRA v2 w/ CSS modules

Bug or support request summary

From https://storybook.js.org/configurations/custom-webpack-config/:

The default Webpack config of Storybook is balanced for a medium-size project (specially created with Create React App) or a library.

I am assuming that this means that Storybook’s default webpack config should be able to handle a new project created by CRA. CRA v2 now has opt-in support for CSS modules. When I created a new CRA project using CRA v2.0.4, I used CSS modules to style a component; however, the component styles do not appear when displaying the component in Storybook.

If this means that I need to extend Storybook’s webpack config to add CSS module support, please close this issue. However, it’s unclear if Storybook is meant to work out-of-the-box with CRA if this is the case. I can make a PR to add documentation around this if Storybook will not add CSS module support out of the box like CRA v2 has.

Steps to reproduce

I have a reproducible example in this repo.

Create a project with npx create-react-app my-app
Add Storybook to the project with getstorybook
Create a component that imports a CSS module.
Render the component in a Storybook story.

If you import the component that uses CSS modules into App.js and run yarn run start, you can see that the styles are applied correctly. However, if you run Storybook with yarn run storybook, the styles do not apply.

Please specify which version of Storybook and optionally any affected addons that you’re running

package.json

{
  "name": "storybook-css-module",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-scripts": "2.0.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@storybook/react": "^3.4.11",
    "@storybook/addon-actions": "^3.4.11",
    "@storybook/addon-links": "^3.4.11",
    "@storybook/addons": "^3.4.11",
    "babel-core": "^6.26.3",
    "babel-runtime": "^6.26.0"
  }
}

Affected platforms

Tested in Chrome v69

Screenshots / Screencast / Code Snippets (Optional)

Repo: https://github.com/matthamil/storybook-css-module-CRA2

Text component when running yarn run start:

Text component when running yarn run storybook:

Work summary

Add CSS module support to Storybook’s webpack config.

Where to start

Take a look at ./src/Text.js and ./src/Text.module.css. The CSS module includes one class .text which applies a red color and 2rem font-size to whatever element is using .text.

Acceptance criteria

Default storybook webpack config can handle CSS modules out of the box.

Who to contact

anyone familiar with Storybook’s default webpack config.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 18 (13 by maintainers)

Most upvoted comments

@igor-dv I can take this on. Depending how it goes, I may be able to take on #4298 as well.

Just a quick question, would you want me to update examples/cra-kitchen-sink to react-scripts@^2.0.0 as part of this PR?

chadfawcett on Oct 10, 2018

For anyone else who created a CRA v2 project that uses CSS modules, I extended the default webpack config by doing the following:

create a webpack.config.js file in the .storybook directory
Add the following CSS module rule:

// ./.storybook/webpack.config.js
const cssModuleRegex = /\.module\.css$/;

module.exports = {
  module: {
    rules: [
      {
        test: cssModuleRegex,
        loaders: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            }
          }
        ]
      }
    ]
  }
};

Now CSS modules should work for your CRA + Storybook project.

matthamil on Oct 6, 2018

This is how I ended up getting css modules to work

// .storybook/webpack.config.js

const setCssModulesRule = rule => {
  const nextRule = rule;
  const cssLoader = rule.use[1];  // admittedly lazy, but the array was mixed types 🤷‍♀️
  const nextOptions = { ...cssLoader.options, modules: true }

  cssLoader.options = nextOptions;  
  return nextRule;
}

module.exports = async ({ config, mode }) => {
  const rules = config.module.rules.map(rule => {
    const isCssRule = rule.test.toString().indexOf('css') !== -1;
    let nextRule = rule;

    if (isCssRule) {
      nextRule = setCssModulesRule(rule);
    }

    return nextRule;
  });

  config.module.rules = rules;
  return config;
};

MrJadaml on Aug 3, 2019

If we are talking about compatibility with CRA2, I think we need to support as much as possible by default. For example, in @storybook/angular, we do recognize that there is a usage of angular-cli and we try to use its configuration as much as possible. So extending the custom webpack.config.js is kinda workaround.

Do you want to PR the better CRA2 compatibility for css modules?

igor-dv on Oct 7, 2018

@weyert Further discussion can be found on the PR https://github.com/storybooks/storybook/pull/4405

chadfawcett on Oct 15, 2018