Component-level css not loading into stories

akhiltheguitarist commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

dyaeger commented 4 years ago

@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] commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

Could we somehow get an update regarding this issue?

shilman commented 3 years ago

@ruijdacd Yes, nobody has responded yet.

shilman commented 3 years ago

Try upgrading to 6.1?

npx sb upgrade

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

shilman commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 https://github.com/storybookjs/storybook/issues/12144#issuecomment-771271708, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOMOSSKBKVU2MD2LXZQGEDS45FWBANCNFSM4QFJ6Y6Q .

fpunny commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

ksbulgakov commented 3 years ago

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 commented 3 years ago

^ Great addon. Works perfectly

sawonersm commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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.