I started building a project where in my src folder I have subfolders, such as Header, Hero, Footer.

Inside each of the subfolders, I have two files, eg.: Hero.js and herostyle.css In Hero.js the stylesheet is imported by the following method:

import './headerstyle.css';

As I start editing the css file, it responds correctly, and the design is changing accordingly, so I am not sure if it's a linking problem.

When I refresh the browser, the CSS breaks, and the way I get the design back, is by having to go back to the Hero.js file:

First - removing the import './headerstyle.css'; codesnippet Second - Doing a quicksave Third - Putting the same codesnippet import './headerstyle.css'; back in Hero.js Fourth - Saving again, and then I get my design back.

I tried resetting the browser's cache, disabling the cache in the developer's console, none of that seems to be working. It is really frustrating, please help.

Thank you