Storybook: Styles are not loading in prod with sass loader and storybook 4

[hetzbr]

Describe the bug
Storybook is loading with stories and the styles are getting loaded when running in dev mode. When running from storybook-static, the styles are not loading

To Reproduce
webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '..', 'src', 'assets'),
      },
    ]),
  ],
  module: {
    rules: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.jsx?$/,
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
      {
        test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
    ],
  },
};

config.js

import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { themes } from '@storybook/components';

setOptions({
  theme: themes.dark
});

const req = require.context('../stories', true, /.stories.jsx?$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Dependencies:

    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.1.2",
    "@storybook/addon-actions": "^4.0.0",
    "@storybook/addon-info": "^4.0.0",
    "@storybook/addon-links": "^4.0.0",
    "@storybook/addon-options": "^4.0.0",
    "@storybook/addon-viewport": "^4.0.0",
    "@storybook/addons": "^4.0.0",
    "@storybook/components": "^4.0.0",
    "@storybook/react": "^4.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.23.1"

Additional context
In dev mode I can see that the styles are getting added using emotion/core, but none of the styles show up when serving from static.

[igor-dv]

@chadfawcett, could it be related to #4645 as well ?

[chadfawcett]

At first glance I believe it's because of the include: path.resolve(__dirname, '../') in the custom config above. When I was testing #4645 I noticed the cra-preset was being called before and after the custom user config. This would results in the custom .scss config being overwritten which would mean that include rule isn't being applied.

I would have to take a deeper look to know for sure.

[ozgkrc]

@hetzbr Do you have sideEffects:false in your package.json? In my case, Webpack 4 considers scss files as a "side effect" and dropping them in production build. So I needed to add:

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

More info

[hetzbr]

@ozgkrc Thank you, setting sideEffects to true did fix the issue!

[chadfawcett]

@igor-dv or @hetzbr Can you close this issue please?