Changes to scss files not reflected after hot reload but are after browser reload

[matttk]

Describe the bug I'm not sure if this is a bug or configuration issue but if I change an SCSS file, storybook will rebuild and hot reload, but it will not take any changes from any SCSS files into account. However, if I reload the browser, the changes will be reflected.

I am importing the SCSS file directly in the React component it's used in.

To Reproduce Steps to reproduce the behavior:

1. Have a React component that imports an SCSS file and uses some styles from it.
2. Create a story using that component.
3. Open up storybook and look at the component.
4. Go to the SCSS file and make an obvious change, like doubling the font size. Save.
5. Note that storybook is now rebuilding after the file change was detected.
6. Look at the component again and note no changes.
7. Refresh the browser.
8. Look at the component again and note that the style has been updated.

Expected behavior I would expect the change to be reflected immediately, just like when I change the .js file or the story.

System Environment Info:

System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz Binaries: Node: 12.14.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.21.1 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 87.0.4280.66 Edge: Spartan (44.18362.449.0) npmPackages: @storybook/addon-actions: ^6.1.6 => 6.1.6 @storybook/addon-essentials: ^6.1.6 => 6.1.6 @storybook/addon-links: ^6.1.6 => 6.1.6 @storybook/react: ^6.1.6 => 6.1.6

[shilman]

Possibly related: #13310

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jbernard-s4m]

I have exactly the same issue, can we have some updates on it ?

[jinglesthula]

Having a similar issue with a tailwind.css file I'm importing into my .storybook/preview.js file. Style changes don't show up unless I reload the whole page to pick up the changed tailwind.css file.

[chaosmirage]

I had similar problem. In my case the following changes helped.

My webpackFinal config was (config.module.rules field):

{
      test: /\.(sa|sc)ss$/,
      exclude: [/node_modules/],
      use: [
         {
            loader: MiniCssExtractPlugin.loader,
         },
          {
              loader: 'css-loader',
              options: {
                  modules: true,
                  importLoaders: 1,
              },
          },
          'postcss-loader',
      ],
  },

I changed

{
   loader: MiniCssExtractPlugin.loader,
},

to

const devMode = process.env.NODE_ENV !== 'production';

...

devMode ? { loader: 'style-loader' }
: {
      loader: MiniCssExtractPlugin.loader,
  },

Because the style-loader is responsible for CSS HMR according to this answer https://stackoverflow.com/a/52045575.

[Stan-Stani]

Also having the issue with the next.js setup including SASS.