CSS edits cause the whole application to reload on the browser.

[DanielNgozika]

Describe the bug

Editing my CSS code on a project bootstrapped with the latest version of create-react-app (v 3.1.1) causes the whole app to reload on the browser as opposed to the former behaviour of just applying the styles without reloading the whole application. For example, editing the CSS code of another project of mine bootstrapped with CRA v2.1.8 doesn't reload the entire app. It might be worth noting that I use CSS modules in both projects.

Did you try recovering your dependencies?

npm version: 6.9.0

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

System:
OS: Windows 8.1
CPU: (2) x64 Pentium(R) Dual-Core CPU T4500 @ 2.30GHz
Binaries:
Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Internet Explorer: 11.0.9600.17037
npmPackages:
react: ^16.9.0 => 16.9.0
react-dom: ^16.9.0 => 16.9.0
react-scripts: 3.1.1 => 3.1.1
npmGlobalPackages:
create-react-app: Not Found

Steps to reproduce

1. After creating a react application with CRA, create a JS file with some JSX code.
2. Create a corresponding module.css file and import in JS file from 1.
3. Add styles and edit.

Expected behavior

I expected that the styles would be applied without reloading the application in the browser as the tool previously behaved.

Actual behavior

Application reloads in order to apply new styling.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[heyimalex]

Regular css reloads, but I can reproduce with css modules.

[DanielNgozika]

Hi @heyimalex.

I don't really get the "I can reproduce with CSS modules" part. Could you explain?

[heyimalex]

@DanielNgozika I was just confirming what you said! Saying "I can reproduce" here means that I can also make this happen on my computer. Not every issue that shows up here is an issue we can fix; sometimes it's specific to a person's machine, sometimes it's just user error, sometimes it's a real bug but it only shows up under certain circumstances. The first step is to find out how and if it can be recreated or reproduced.

[DanielNgozika]

@heyimalex Right. It's clear now. I didn't want to assume anything.

[chiangs]

I noticed this as well...I use css modules extensively and before it would not refresh the app when making a change to css file, but now it does. I also just created a new CRA, changing the App.css file does not reload, but changing over to App.module.css and then making a change does cause the reload.

[avaleriani]

I'm having the same issue. It used to reload css without page refresh but a couple of update it stopped.

[wickedsouls]

Same problem for me, changing *.module.css files reloads application. This is a pain when you have api requests on reload just to check how is your style

[dmitrybndar]

Same problem with SCSS modules. Editing *.module.scss files makes page reloading

[spereirag]

Is there any workaround to this issue?

[thiphariel]

in addition, it seems to be a duplicate of #7561 (This bug is not present on 3.0.1 !)