In my project I have a sass file which I set sourcemappath through the node-sass. I am using Node-sass to compile my sass file. I have map my .css file on my system. so any changes I made through source panel save my file on the disk. and it's compiled back by node-sass. I am not seeing reload my auto-generated css anywhere so I think it's on by default.
I want to save the changes that I made on element panel. When I click on css file from element panel (which is scss file, work through sourcemap) it doesn't have my changes.
Is it possible to save my changes from element panel. I made some changes and I didn't see in source panel. when I refresh I can still see my changes but it doesn't reflect in the file.
This is currently an experimental feature. It is hidden behind flags since it could be unstable and break things. If you'd like to try it now then do the following:
- Go to
chrome://flags/#enable-devtools-experimentsin your omnibar - Enable the flag for Experimental DevTools Features
- Restart the browser
- Open DevTools and go to the Settings then a new
Experimentstab on the left is available - In the experiments tab, turn on the
Live SASSoption - Restart DevTools
You should now have changes in the Elements panel persist into your Sass as long as it is properly source-mapped.
Paul Irish covered this feature (among others) in his portion of the I/O 2016 talk about Accelerating Your Workflow.
I don't believe what you want is possible. You might want to look at options like LiveReload for this behaviour. You could change the code in IDE, compile, and livereload will detect your changes to the compiled .css file on the filesystem and reload it in your browser.
来源：https://stackoverflow.com/questions/46360983/i-want-to-edit-my-sass-file-from-chrome-dev-tool-from-element-tab-is-that-possi