How to auto-reload css in Chrome after editing SASS files

Question

I am trying to set up the mapping feature in Chrome canary. I followed the screenshots in this answer.

The main feature works, when I inspect an element, it points me to my local sass file and when I edit it, the local file safes, and the `sass --watch' is triggered. However, the browser does not refresh, even though on the "General" tab in devtools I have checked "Auto-reload CSS upon Sass save".

Should the browser reload? Is there a way to get it to reload?

Ps - I have compass but I can not use that as it does not support mapping, so I am compiling sass through the terminal

Thanks

Answer 1

You probably forgot this step:

In the Sources tab, find your generated CSS file, right click on it and choose Map to network resource, and select the same file name in the shown dropdown:

and then choose the matching file from your workspace:

Answer 2

It could be that the Sass-file is still compiling when Chrome tries to reload the CSS. Setting the 'Auto-reload CSS upon Sass save' Timeout to 5000 ms fixed it for me. When Chrome triggers the reload, it can even prevent Sass from recompiling the CSS.