Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 216
user3590211 Avatar asked Apr 30 '14 17:04

user3590211


People also ask

Does browser understand SCSS?

A browser does not understand Sass code. Therefore, you will need a Sass pre-processor to convert Sass code into standard CSS. This process is called transpiling. So, you need to give a transpiler (some kind of program) some Sass code and then get some CSS code back.

How do I link a sass file to HTML?

Add the following to the <head> tag of your HTML file. The extension we installed will compile the SASS file index. scss into CSS and store the compiled code in a new CSS file, also called index. css .


1 Answers

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.

like image 200
Alexander Pavlov Avatar answered Oct 12 '22 14:10

Alexander Pavlov