Storybook: Component-level css not loading into stories

[akhiltheguitarist]

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

[dyaeger]

Experiencing the same issues. I added some style imports to a .storybook/preview.js file but adding each individual import for each component would be way too much work.

.storybook/preview.js

import 'react-toastify/dist/ReactToastify.css';
import '../src/utils/hooks/drawer-hook/drawer.scss';
import '../src/app/theme.scss';
import '../src/app/theme-fix.scss';

But any .css or '.scss' file imported by a component is ignored.

[akhiltheguitarist]

@dyaeger did it work when you added the styles file imports to preview.js?

[dyaeger]

@akhiltheguitarist - It did but with over 50 different components it is just too much to be importing by hand. Perhaps fine if it's a new project and users are weary of needing to do this for each component with its own css file? For now I've downgraded storybook.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ruijdacd]

I have been encountering the same issue, only when building storybook and deploying it. Launching storybook in dev mode, it seems to load the styles correctly.

    "@storybook/addon-a11y": "^6.0.16",
    "@storybook/addon-actions": "^6.0.16",
    "@storybook/addon-docs": "^6.0.16",
    "@storybook/addon-essentials": "^6.0.16",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.0.16",

[ruijdacd]

Could we somehow get an update regarding this issue?

[shilman]

@ruijdacd Yes, nobody has responded yet.

[shilman]

Try upgrading to 6.1?

npx sb upgrade

Also did you try adding @storybook/preset-scss?

[shilman]

We changed the way we map static directories in 6.0. It was modified slightly in 6.1.6: https://github.com/storybookjs/storybook/pull/13245

@jonniebigodes can you track this down?

[jonniebigodes]

I've setup a repo here to test this issue. So far i was unable to replicate the issue.

The repo contains three branches:

• main with a component with local css loaded.
• styling_scss with styling done in sass and loaded into a local component.
• css_and_scss_with_toast_on_top with react toast and css loaded. toastify is loaded into preview.js as it's a "high order css" required. The css that the component is using is loaded locally.

Testing done:

• Development mode(yarn storybook) and production mode (yarn build-storybook) with http-server package to emulate standalone webserver.

Based on testing done the css was loaded correctly into the component in Storybook. If anyone is willing to share a more complex based on the comment here i'm willing to adjust accordingly and test it further. Because the only possible issue here is that there could be a clash between Storybook's own css and some external /local css implementation.

Feel free to let me know and we'll take it from there.

Stay safe all.