HMR HOT Reloading broken for Styles SCSS

[BerndWessels]

Hi

Hot module reloading for styles must have a bug that renders storybook useless.

1. Change variable $button-border-radius: from 4px to 8px and HMR rebuilds and works.
2. Change variable $button-border-radius: back to 4px and HMR does NOT rebuild. No update.
3. Change variable $button-border-radius: to 6px and HMR does NOT rebuild. No update.
4. Change variable $button-border-radius: to 10px and HMR rebuilds and works.
5. Change variable $button-border-radius: back to 4px` and HMR does NOT rebuild. No update.

So what I guess is happening is that there is some kind of hashing and caching going on within the HMR pipeline that prevents HMR to properly pick up changes.

Unfortunately this renders storybook for us totally useless since we cannot get HMR reliable when changing styles.

Does anybody know about a fix or a workaround?

Latest fresh install of storybook with @kadira/storybook v2.35.3

We have the following .storybook/webpack.config.js:

const path = require('path');

module.exports = function(storybookBaseConfig, configType) {

  storybookBaseConfig.module.loaders.push({
    test: /\.scss$/,
    loaders: [
      'style-loader',
      'css-loader?{"modules": true, "importLoaders": 2}',
      "sass-loader"
    ],
    include: path.resolve(__dirname, '../')
  });

  return storybookBaseConfig;
};

In src I have this src/component.jsx:

import React from 'react';
import classnames from 'classnames';
import styles from './styles.scss';

export default class Button extends React.Component {
  render() {
    let {children, primary, ...props} = this.props;
    let classes = classnames(styles.button, {
      [`${styles.primary}`]: primary
    });
    return <button className={classes} {...props}>{children}</button>
  }
}

and this styles.scss:

@import './theme.scss';

.button {
  padding: $button-padding;
  border-radius: $button-border-radius;
}

and this theme.scss:

$button-padding: 4px;
$button-border-radius: 4px;

and this is the stories/index.js:

import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../src/component';

storiesOf('Button', module)
  .add('default state', () => (
    <Button>Button</Button>
  ));

[moimikey]

@BerndWessels from what I remember, i was having a similar issue. It may not be helpful, but I've since begun to run style-loader in singleton mode, and it seemingly has helped, but it's definitely not a cure-all. style-loader?singleton

[BerndWessels]

@moimikey unfortunately that doesn't fix it for me.

Are there any other workarounds for this problem?

[BerndWessels]

More digging and after upgrading from @storybook/react@3.0.0-rc2 to @storybook/react@3.0.0 the singleton workaround started working for me too.

[shilman]

@BerndWessels so happy to hear you got it solved!!! Any chance you can add this to the documentation?