Storybook: Static build (S)css issue

[mick-feller]

Describe the bug
When running storybook everything works perfect as soon as i'm generating a static build most of my scss files are not being included

Expected behavior
I expect that the static build looks the exact same as the storybook run command.

Screenshots
When running Storybook:

When generating a static bundle:

Code snippets
.storybook/webpack.config.js

const path = require("path");
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const fs = require('fs');
const appDirectory = fs.realpathSync(process.cwd());

module.exports = {
  module: {
    rules: [
      {
        test: /\.stories\.jsx?$/,
        loaders: [require.resolve('@storybook/addon-storysource/loader')],
        enforce: 'pre',
      },
      {
        test: /\.(js|jsx|mjs)$/,
        enforce: 'pre',
        use: [
          {
            options: {
              formatter: eslintFormatter,
              eslintPath: require.resolve('eslint'),
              emitWarning: true
            },
            loader: require.resolve('eslint-loader'),
          },
        ],
        include: path.resolve(appDirectory, 'src'),
      },
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
      },
      {
        test: /\.svg$/,
        loader: 'raw-loader'
      }
    ]
  }
};

Accordion.stories.jsx

import React from 'react';
import { storiesOf } from '@storybook/react';
import Accordion, { AccordionHeader, AccordionContent } from 'components/Accordion';

storiesOf('Components|Accordion', module)
  .addParameters({ jest: ['AccordionContext'] })
  .add('Accordion Example', () => {
    return (
      <Accordion auid="Story">
        <AccordionHeader auid="Story">
          Accordion Title
        </AccordionHeader>
        <AccordionContent auid="Story">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada ante
          vel libero elementum sollicitudin. Proin quis est neque. Curabitur mollis
          scelerisque odio, eget convallis nisi egestas sit amet. Duis ut iaculis
          dolor, id pretium justo. Class aptent taciti sociosqu ad litora torquent per
          conubia nostra.
        </AccordionContent>
      </Accordion>
    );
  });

Snippet of the actual component, to show how i'm importing scss file

import React, { Component } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { AccordionContext, DISPLAY_NAME } from './AccordionContext/AccordionContext';
import toAuid from '../../utils/auid';
import './Accordion.scss';

System:

• OS: MacOS
• Device: Macbook Pro 2017
• Browser: chrome
• Framework: react
• Version: 4.0.6

Additional context
I have also tried to extract the css with minicssextractplugin same result happens

My folder structure looks like this:

• .storybook
• components
  -- Accordion
  --- Accordion.jsx
  --- Accordion.scss
• stories
  -- Components
  --- Accordion
  ---- Accordion.stories.jsx

This happens with all the stories not just this specific one FYI.

One thing to mention every .scss file i include in my .storybook/config.js file is being included properly.

I've also tried setting the

include: path.resolve(__dirname, '../')

to:

include: path.resolve(__dirname, '../components')

Which results in an error saying it can't include the .scss file i probably need a correct loader for that file.

Any help would be welcome

[igor-dv]

Hey @mick-feller ,do you have a reproduction somewhere?

[mick-feller]

Here you go:
https://github.com/mick-feller/storybook-build-debug

Tried to make it as small as possible but left all addons etc.

I've in the meanwhile upgraded to the new alpha version to see if that helped, no luck there either

[igor-dv]

I've tried to set up the repo, but there are some @od/* packages (probably internals ?) that are missing...

[mick-feller]

you are right, just removed it.

[igor-dv]

Ok, I don't get what's the thing here... Downgraded it down to v4.0.0, and the problem still remains 🤦‍♂️

[mick-feller]

The problem with the build still remains you mean? Or you can't rum the repo?

[igor-dv]

I mean the problem with the build. I will try to reproduce this in the official example

[mick-feller]

The only potential difference i can see from other projects is that i don't have any cra or other build for my app/components. I'm relying only on the storybook build. I don't know if this makes any difference.

[anhmv91]

I am facing with this problem too when build static, and I think somethings went wrong with mini-css-extract-plugin, I currently temperature fix by move <script src="css/iframe.7bbbcae7.css" defer></script> and <script src="css/iframe.7bbbcae7.css" defer></script> up to the <head> and use the link ref stylesheet instead, in frame.html

[igor-dv]

I think @mick-feller is not using mini-css-extract-plugin for static storybook mode.

[mick-feller]

I tried several ways actually.

Without mini-css-extract-plugin, with mini-css-extract-plugin and with extract-text-plugin.

Non of these worked for me

[igor-dv]

A good friend of mine (@leeran88) pointed me to an issue (#4918) that straight connected me to this problem 😄

The thing that I missed in your setup is a "sideEffects": false in your package.json.
Checked it right now and setting sideEffects: true to the specific rule solved the issue 👍

{
        test: /\.scss$/,
        sideEffects: true,
        loaders: [
            "style-loader",
            "css-loader",
            "sass-loader"
        ],
        include: path.resolve(__dirname, "../")
    }

[mick-feller]

You are the MAN!!!

Thank you very much, never realized that this could cause that.

Thanks again!!

[edelgado]

Thank you again! 🎉