I created a react app using create-react-app, and added a button component, a css for the button. When I load the story for the button, the styles are not loaded for the button. Pasting below, the related files. Is there any configuration that I am to do, to get this up and running with styles?

github repo for the project

Component: index.js

 import React, { Component } from 'react';
import styles from './style.css';
class CustomButton extends Component{
    render(){
        return (
            <button className={styles.customButton}>Hello</button>     
        );
    }
}
export default CustomButton;

style.css:

.customButton {
    border: 1px solid red;
    padding: 10px;
    background-color: rgb(223, 19, 19);
}

Story file:

import React from 'react';
import CustomButton from '../../src/index';
import { storiesOf } from '@storybook/react';


const story = storiesOf("Custom button",module);

story.addWithJSX("simple",() => <CustomButton/>);

System info:

Environment Info:

  System:
    OS: Windows 7 6.1.7601
    CPU: (2) x64 Intel(R) Core(TM) i3-2370M CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.125
  npmPackages:
    @storybook/addon-info: ^5.3.19 => 5.3.19
    @storybook/components: ^5.3.19 => 5.3.19
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^5.3.19 => 5.3.19

I created a react app using create-react-app, and added a button component, a css for the button. When I load the story for the button, the styles are not loaded for the button. Pasting below, the related files. Is there any configuration that I am to do, to get this up and running with styles?

github repo for the project

Component: index.js

 import React, { Component } from 'react';
import styles from './style.css';
class CustomButton extends Component{
    render(){
        return (
            <button className={styles.customButton}>Hello</button>     
        );
    }
}
export default CustomButton;

style.css:

.customButton {
    border: 1px solid red;
    padding: 10px;
    background-color: rgb(223, 19, 19);
}

Story file:

import React from 'react';
import CustomButton from '../../src/index';
import { storiesOf } from '@storybook/react';


const story = storiesOf("Custom button",module);

story.addWithJSX("simple",() => <CustomButton/>);

System info:

Environment Info:

  System:
    OS: Windows 7 6.1.7601
    CPU: (2) x64 Intel(R) Core(TM) i3-2370M CPU @ 2.40GHz
  Binaries:
    Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.125
  npmPackages:
    @storybook/addon-info: ^5.3.19 => 5.3.19
    @storybook/components: ^5.3.19 => 5.3.19
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^5.3.19 => 5.3.19

• javascript
• css
• reactjs
• webpack
• storybook

• It looks like your currently have no main.js which configures webpack css files? Where is the file? – tmhao2005 Commented Aug 20, 2020 at 8:59
• I have linked my github repo above. All those files are available there. Repo: github.com/akhiltheguitarist/StoryBook – Akhil Commented Aug 21, 2020 at 9:04
• I meant the file main.js located under this dir github.com/akhiltheguitarist/StoryBook/tree/master/storybookapp/… – tmhao2005 Commented Aug 21, 2020 at 9:14
• I have added them within the config.js file. Storybook is loading for me. Just that the css is not applied to my component. – Akhil Commented Aug 21, 2020 at 10:58
• In order to configure webpack css you might have to put into the main.js file. Anyway I'll show you in the answer then – tmhao2005 Commented Aug 21, 2020 at 11:15

2 Answers 2

In order to storybook works with webpack, you have to firstly create file main.js under the .storybook dir. Then add style-loader + css-loader loaders to resolve your css import. Keep in mind, enable modules: true option in css-loader to help you import your classes:

.storybook\main.js

const path = require('path');

module.exports = {
  webpackFinal: async config => {
    // Remove the existing css rule
    config.module.rules = config.module.rules.filter(
      f => f.test.toString() !== '/\\.css$/'
    );

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

    return config;
  },
};

tmhao2005's answer helps a lot. Note however that this is probably duplicating some Webpack rule config from your main app, and things will potentially get out of sync if you decide to make tweaks or add other CSS loaders in the future. For instance, if you decide to add postcss-loader, you'd need to remember to add it in both your app's Webpack config in webpack.config.js and your Storybook Webpack config in .storybook/main.js (hint: you will not remember!).

Here's a slightly cleaner tweaked version that tells Storybook to reuse your app's Webpack CSS rule config. This version will stay in sync with your main app's Webpack rule:

// .storybook/main.js

// Imports the app's Webpack Config (change this to require() style with older Node.js versions).
import appWebpackConfig from '../webpack.config.js';

const isCSSRule = (rule) => rule.test.toString() === '/\\.css$/';

module.exports = {
    ...
    webpackFinal: (config) => {
        // Removes the existing CSS rule.
        config.module.rules = config.module.rules.filter((rule) => !isCSSRule(rule));

        // Tells Storybook to use the same CSS rule config as our app.
        config.module.rules.push(appWebpackConfig.module.rules.find(isCSSRule));

        return config;
    }
    ...
};

I tested this with Storybook 6.0.21 and it's working pretty nicely.