Component-level css not loading into stories #12144

akhiltheguitarist · 2020-08-19T20:10:37Z

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

The text was updated successfully, but these errors were encountered:

dyaeger · 2020-08-20T22:19:52Z

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 · 2020-08-21T03:42:30Z

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

dyaeger · 2020-08-21T17:17:06Z

@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 · 2020-09-11T17:18:12Z

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 · 2020-09-29T08:59:26Z

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 · 2020-11-23T21:18:56Z

Could we somehow get an update regarding this issue?

shilman · 2020-11-23T21:41:48Z

@ruijdacd Yes, nobody has responded yet.

shilman · 2020-11-23T21:43:57Z

Try upgrading to 6.1?

npx sb upgrade

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

shilman · 2020-11-25T01:26:02Z

We changed the way we map static directories in 6.0. It was modified slightly in 6.1.6: #13245

@jonniebigodes can you track this down?

jonniebigodes · 2020-12-08T00:18:59Z

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.

Hamdan85 · 2021-02-01T15:54:10Z

@jonniebigodes we're using scss and tailwind here... I can confirm that no scss imported in component level are considered... styles are completely ignored.

And I can't even understand how can storybook load a jsx file and ignore scss that is imported within... but it is exactly what's happening.

jonniebigodes · 2021-02-02T01:05:22Z

@Hamdan85 if you could push a small repo and share it we'd appreciate it and help us get to the bottom of this. Sounds good?

Hamdan85 · 2021-02-02T17:21:10Z

unfortunatelly no because it's my company's code... But man, nothing much... using a react component that imports a scss file already causes it. Em seg., 1 de fev. de 2021 às 22:05, jonniebigodes <notifications@github.com> escreveu:

…

@Hamdan85 <https://github.com/Hamdan85> if you could push a small repo and share it we'd appreciate it and help us get to the bottom of this. Sounds good? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#12144 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAOMOSSKBKVU2MD2LXZQGEDS45FWBANCNFSM4QFJ6Y6Q> .

fpunny · 2021-02-25T12:05:13Z

@jonniebigodes for your setup repo, can you try importing a scss file in preview.js instead? Because that is the issue I'm having currently. When in development mode, it runs fine - but is somehow missing when built

fpunny · 2021-02-26T03:40:08Z

I can confirm css files work, using sass to preprocess the scss files before build/dev into css files. But I feel like this is more of a hack than a real solution...

johndatserakis · 2021-02-28T16:05:45Z

Hi there, I've landed on this thread after experiencing the same issue. That is, everything is fine for me in development, but when I build my Storybook instance, the .scss file that is imported in my main component file doesn't seem to be gathered during the build, and my outputted build doesn't have the, or any, expected styles with it.

The project is open-source and is here. It is a very simple exported component. I build my Storybook instance to the ./docs folder so it's served with GitHub pages.

Main component here

I recently updated the Storybook instance to > 6, and that's when the "css missing in production" issue started happening.

"@storybook/addon-a11y": "^6.1.20",
"@storybook/addon-actions": "^6.1.20",
"@storybook/addon-essentials": "^6.1.20",
"@storybook/addon-links": "^6.1.20",
"@storybook/react": "^6.1.20",

TypeScript: "typescript": "^4.2.2"

To alleviate the issue for now, I've imported an already built version of my .css directly into a preview-head.html.

Here are a few of the things I've tried:

I've tried adjusting my .storybook/main.js.
I've tried using @storybook/preset-scss instead of my custom main.js style handling.
I've tried to import my import './react-mailchimp-email-signup-form.scss'; directly into my .storybook/preview.js as a few people suggest - and nothing, still no css in the final build.
I've tried downgrading my sass-loader to "^10.1.1" from 11 like some threads suggested.

I wanted to document this here because while I'm sure it's a small thing, it's kinda an important issue that needs to be sorting out. Hopefully the information provided can help track it down. Thank you.

andreitere · 2021-03-02T09:23:34Z

I can also confirm this behavior on a Vue-based project. Tried different things but it seems that any kind of scss is ignored when building the docs.

This works:

<style>
.trigger {
	background: blue;
}
</style>

This doesn't work:

<style lang="scss">
.trigger {
	background: blue;
}
</style>

Doesn't work either:

<style lang="scss">
@import "./trigger.scss";
</style>

cherylcarpenter · 2021-03-09T16:18:11Z

Same issue,
"vue": "^2.6.11"
"@storybook/vue": "^6.1.21",

global level scss loads and compiles
in component style does nothing

or any scenarios described by @andreitere

I tested the front end of my application and vue is loading the style just fine in the component. This is a really nasty bug. Trying to down grade to 6.0.0.....

algoz098 · 2021-03-18T20:40:11Z

This is happening with vue with vuetify, any update to version 6,

Some more info, if i import each of the files, from vuetify, it works.

Sumolari · 2021-03-28T10:50:19Z

I had the same issue where styles using SCSS in Vue Single File Components where ignored when building the Storybook using build-storybook:

<style lang="scss">
// ...
</style>

When the style was marked as css it worked fine. I managed to fix it for scoped styles, too, with the same solution.

Note that my Vue components are in a Yarn workspace and they are split in several packages that are marked as ES Modules using "type": "module" in their package.json. They are also marked as "sideEffects": false to enable tree-shaking.

I managed to fix this by adding a new rule for scss files and marking them as having side-effects. Without sideEffects: true this didn't work for me either.

// .storybook/main.js
module.exports = {
  // ... other non-important stuff
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true,
      use: ['vue-style-loader', 'css-loader', 'sass-loader'],
    });

    return config;
  },
};

cherylcarpenter · 2021-04-30T00:03:36Z

I am now trying this in Svelte, same issue.
I tried @Sumolari 's solution, no improvement.
global level scss loads and compiles
in component style does nothing

antonio-wundermart · 2021-05-28T15:53:24Z

@Sumolari Thank You Sir! It worked for me in SFC with vue3

ksbulgakov · 2021-08-25T22:54:15Z

If smb still has problem of using css-modules in storybook with this solved the issue for me - https://github.com/Negan1911/storybook-css-modules-preset

Shahaed · 2021-09-09T21:04:44Z

^ Great addon. Works perfectly

sawonersm · 2021-09-13T10:22:29Z

For me, putting sideEffects: true solved the issue

// .storybook/main.js
const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.s?css$/,
      sideEffects: true,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: `@import "@/assets/scss/_variables.scss";`
          },
        }
      ],
      include: path.resolve(__dirname, '../')
    })

    return config
  }
}

Webpack

// .storybook/webpack.config.js
const path = require('path')

module.exports = ({ config }) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': path.resolve(__dirname, '../src')
  }

  return config
}

Versions

"sass": "^1.39.2",
"sass-loader": "^10.2.0",
"storybook": "^6.3.8",
"vue-style-loader": "^4.1.3"

ValfarDeveloper · 2022-06-09T15:17:10Z

I solved it using the sass-loader, css-loader and style-loader in main.js:

// File .storybook/main.js

module.exports = {
...
webpackFinal: async (config) => {
    config.module.rules.push(
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    );
},
...
};

WahabShah23 · 2022-06-20T12:03:25Z

Incase someone is still facing the issue in 2022. So I had similar issue that everything was working fine just component css module styles were not being picked. I installed these 2 packages npm i --save-dev storybook-css-modules-preset & npm i --save @storybook/addon-postcss .

Then in your .storybook folder main.js file inside the addons array ad them like this

`

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-postcss', <========
'storybook-css-modules-preset' <========
],

`
And it worked!

shc261392 · 2022-12-16T05:37:19Z

Incase someone is still facing the issue in 2022. So I had similar issue that everything was working fine just component css module styles were not being picked. I installed these 2 packages npm i --save-dev storybook-css-modules-preset & npm i --save @storybook/addon-postcss .

Then in your .storybook folder main.js file inside the addons array ad them like this

`

addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-postcss', <========
'storybook-css-modules-preset' <========
],

` And it worked!

Installing storybook-css-modules-preset fixes the issue for me. @storybook/addon-postcss doesn't seem to be necessary for the fix to in my case.

Also, for anyone looking for the solution, make sure you install storybook-css-modules-preset instead of storybook-css-modules.

T0miii · 2023-05-10T09:12:57Z

I still have this issue using vue 3 with vite and storybook 7.
Should such things not work out of the box? I cant seem to find any documentation that would tell me to do something extra to load my component css.

xxxKOTxxx · 2023-06-22T13:53:42Z

Surprisingly, despite all the efforts (if any) of the developers, I encountered this 2019 bug in the middle of 2023.

Both version 6 and 7 work equally badly on vite!

Any import from Stylus causes error. SCSS styles imported as CSS, but imported classNames totally ignored.

Do we need to use vanilla HTML/CSS in 2023 to use Storybook?

mogamogua · 2023-08-20T07:16:46Z

same issue here. :/

siarhei-yeliseeu · 2023-10-18T10:27:49Z

Same now, nothing above helped (Vue 2 + Storybook 6/7)

squidjam · 2024-03-13T14:53:56Z

Greetings from March 2024!

Is there no solution yet to this issue? (Storybook 7.6.10 + React 18)

chris-erickson · 2024-03-14T02:17:22Z

We're just migrating everything to tailwind, hours and hours of messing with it and it never worked 😵‍💫

agl-developer · 2024-05-06T23:12:49Z

Any updates on this issue?
Storybook v8.0.9
React v18.2.0

shilman added react question / support labels Aug 20, 2020

stale bot added the inactive label Sep 11, 2020

stale bot removed the inactive label Sep 29, 2020

shilman added cra Prioritize create-react-app compatibility P0 labels Nov 23, 2020

shilman assigned jonniebigodes Nov 25, 2020

shilman added this to the 6.1.x milestone Nov 25, 2020

shilman unassigned jonniebigodes Jun 8, 2021

shilman removed this from the 6.1.x milestone Jun 8, 2021

shilman removed the P0 label Oct 18, 2022

Component-level css not loading into stories #12144

Component-level css not loading into stories #12144

Comments

akhiltheguitarist commented Aug 19, 2020 • edited

dyaeger commented Aug 20, 2020

akhiltheguitarist commented Aug 21, 2020

dyaeger commented Aug 21, 2020 • edited

stale bot commented Sep 11, 2020

ruijdacd commented Sep 29, 2020

ruijdacd commented Nov 23, 2020

shilman commented Nov 23, 2020

shilman commented Nov 23, 2020

shilman commented Nov 25, 2020

jonniebigodes commented Dec 8, 2020

Hamdan85 commented Feb 1, 2021

jonniebigodes commented Feb 2, 2021

Hamdan85 commented Feb 2, 2021 via email

fpunny commented Feb 25, 2021 • edited

fpunny commented Feb 26, 2021

johndatserakis commented Feb 28, 2021 • edited

andreitere commented Mar 2, 2021

cherylcarpenter commented Mar 9, 2021 • edited

algoz098 commented Mar 18, 2021

Sumolari commented Mar 28, 2021

cherylcarpenter commented Apr 30, 2021

antonio-wundermart commented May 28, 2021 • edited

ksbulgakov commented Aug 25, 2021

Shahaed commented Sep 9, 2021

sawonersm commented Sep 13, 2021

ValfarDeveloper commented Jun 9, 2022 • edited

WahabShah23 commented Jun 20, 2022

shc261392 commented Dec 16, 2022

T0miii commented May 10, 2023

xxxKOTxxx commented Jun 22, 2023 • edited

mogamogua commented Aug 20, 2023

siarhei-yeliseeu commented Oct 18, 2023

squidjam commented Mar 13, 2024

chris-erickson commented Mar 14, 2024

agl-developer commented May 6, 2024

akhiltheguitarist commented Aug 19, 2020 •

edited

dyaeger commented Aug 21, 2020 •

edited

fpunny commented Feb 25, 2021 •

edited

johndatserakis commented Feb 28, 2021 •

edited

cherylcarpenter commented Mar 9, 2021 •

edited

antonio-wundermart commented May 28, 2021 •

edited

ValfarDeveloper commented Jun 9, 2022 •

edited

xxxKOTxxx commented Jun 22, 2023 •

edited