search

NV / chrome-devtools-autosave

Auto-saving CSS and JavaScript changes from the Chrome Developer Tools
MIT License
1.05k stars 90 forks source link

Support for Chrome's "Auto-reload CSS upon SASS save" feature #78

Open simonexmachina opened 11 years ago

simonexmachina commented 11 years ago

Chrome has a new feature that watches for changes to compiled CSS when you Save a source-mapped file. So I can open a SASS file in Dev Tools, press Save and it will reload the updated CSS without requiring a reload of the page.

Unfortunately this only works when I do "Save As", and therefore I don't get the benefit of this extension's merging of changes and general awesomeness.

To enable this feature, you need to navigate to chrome:flags and enable the "Developer Tools Experiments", restart Chrome, open the inspector, open its Settings, go to the Experiments tab, select "Support for SASS", close the inspector and reopen it, go to the Settings again, open the General tab and select "Enable Source Maps" and "Auto-reload CSS upon SASS save".

Then, you need to have Compass or whatever watching your SASS files for changes and recompiling the CSS on the fly.

If you need any help with setting this up, or getting SASS compiled with the source maps included then please feel free to get in touch with me. It's pretty easy once you know how to do it.

This is very nearly a 'holy grail' workflow, would love to see this working with this extension.

Oh, and thanks for an awesome tool - I love it :)

bjorkblom commented 11 years ago

Hi,

I've manage to set every thing up, when I save the file in Chrome Dev Tools the SASS compiler compile a new css file, but Chrome don't reload the changes and I have to manual reload the page to see the changes. What am I doing wrong?

smercadomx commented 11 years ago

I'm having the same issue on Windows 7 using Chrome Canary 30.0.1560.0 and SASS 3.3.0.alpha.198.

rootical commented 7 years ago

Same here, can't find the option Auto-reload CSS upon Sass save. Reloading manually sucks.