question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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® 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.)

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:13
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
heyimalexcommented, Sep 10, 2019

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

5reactions
wickedsoulscommented, Oct 18, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Force browser to refresh CSS, JavaScript, etc - Stack Overflow
General solution. Pressing Ctrl + F5 (or Ctrl + Shift + R ) to force a cache reload. I believe Macs use Cmd...
Read more >
How can I make HTML/CSS changes automatically reload in ...
Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page. However, that app...
Read more >
Force Reload Even the Most Stubbornly Cached CSS Files
Learn a simple trick how to force reload all cached CSS files on a page ... The browser has a copy of the...
Read more >
How to reload CSS without reloading the page using JavaScript
How to reload CSS without reloading the page using JavaScript ?
Read more >
How Do I Force the Browser to Update the CSS?
There are some issues with cache refresh when the CSS includes @import rules to other css files. Even if you add a random...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found