Chrome/Sass Sourcemaps, changes made in inspector not saved in SCSS file

Question

Here's a quick summary of what I'm talking about:

https://medium.com/what-i-learned-building/b4daab987fb0

When using Chrome with workspaces and sourcemaps set up, and the local/network files linked, I can use the Chrome web inspector (under the Elements -> styles pane) to recognise the location of the selector in the correct SCSS file. In addition, I can click that, be taken to the SCSS file, make a change and then save it successfully to the file system. However, what I have previously had working is changes made in the elements->styles panel to get updated in the SCSS file (i.e. If I make a change in the elements tab and check the SCSS file within chrome it should have changed it).

Instead it makes the changes to the CSS file. Obviously this is not very useful as:

• It will be overwritten as soon as the SCSS file is changed
• It means Chrome will show styles which are not in the SCSS file, even after reload, as they are saved persistently in the CSS file

I've tried this on both OSX and Windows, using Sass 3.3.6. Can also confirm that it's not the "../" issue referred to in #9 https://code.google.com/p/chromium/issues/detail?id=273384 as the sass file is now within the css file. There are also no style.css?ver=x extensions on the stylesheet tag.

Answer 1

https://code.google.com/p/chromium/issues/detail?id=257778 is what you are asking for. Patching SCSS in place of CSS when the Styles pane is edited is impossible (ambiguous) in the general case if variables or complex language features are involved, so your best bet is to Ctrl-click the required CSS property in the Styles pane to navigate to the corresponding SCSS fragment and edit plain SCSS resource text, then save (Ctrl+S) and let the sass compiler (running in the watch mode) do the rest. You should have both of the Enable CSS source maps and Auto-reload generated CSS settings enabled for the DevTools to pick up the generated CSS changes.