storybook: Component-level css not loading into stories

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;
  },
};

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",

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.

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!

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.

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

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"

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>

@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.

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