Chrome reloading CSS for page only once when editing via Sources panel

Question

I'm on a Mac, macOS High Sierra 10.13.6

Since i updated Chrome a week or two ago, changes i make to CSS files (or SCSS for what its worth) will be saved correctly always, but Chrome will only refresh the styles in my page once. Local Overrides are disabled, Workspaces set up correctly, Source Maps are and have always been proper and in place. Nothing actually changed in my environment, other than updating Chrome.

I tried resetting all the caches, tried hard reloads, removing cache internals even. I tried anything i could think of. I researched online but was not able to find answers to this particular problem.

So to sum it up:

1. I open Chrome
2. I load my page locally (a localhost environment)
3. I open Developer Tools
4. I pick an element on my page
5. I click on the name of the resource on the right (a CSS or SCSS file)
6. I make changes to the source of the CSS/SCSS file file via the sources tab
7. I hit save. Changes are saved. Netbeans if open will immediately show the changes. If it was a SASS file, NetBeans triggers the compile on change
8. Chrome updates the styles in the page as it should
9. I make another change in Sources panel
10. I save the changes
11. Changes are saved – if NetBeans is open it will show the changes immediately and if it is a SASS file it will compile it
12. Chrome does not update the styles in the page. Never again until i reload.

I even reinstalled Chrome. Removed ~/Library/Application Support/Google/Chrome entirely and restarted the browser after, starting off with a completely fresh profile. Still no jazz.

Can someone point me in the right direction here?

Answer 1

After my frustration went through the roof, i decided to meticulously cut down content from my rather large primary SCSS file for the page, reloading the page each time, trying and testing out making changes. Turns out the problem went away as soon as i removed a certain @import on top of the file. But other imports worked.

Why?

The imported file was for fonts. It contained various @font-face definitions. And on the bottom i had two `@import' statements referring to external resources via http.

I removed those and bingo – now Chrome was updating the styles properly with every change i made. Problem solved. Is this a bug? I don't know.

I then tried to place the imports directly in the main SCSS file on top, and even then they will cause the problem to occur.

The SASS documentation has this to say:

Plain CSS @imports

Because @import is also defined in CSS, Sass needs a way of compiling plain CSS 
@imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any @imports with the following characteristics to plain CSS imports:

Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries.

In other words, i basically wrote a normal CSS @import and while i have not tested this in other environments or systems, any such statements seem to break Chrome's ability to automatically update styles for a page after it was done once.

So to save others time who might stumble upon this: Get rid of your @imports and you'll be good.

The accepted answer of this question contains a good explanation.