Static build (S)css issue

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]

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!!