Chrome mapping to local file not working

[cwagner22]

I spent a lot of time trying to get Chrome's local file mapping to work. I want to be able to edit my sass files in Chrome and automatically save the modifications locally. I have followed these instructions. Unfortunately this is not working. I have also tried with test/sourceMap.

I can see the correct file name:

But if I add the local folder to Chrome's workspace, map the scss file and restart devtools this is what I see.

Clicking on it show me the whole compiled css file instead of the scss source. Can someone give me the correct steps to get it to work?
I already looked at #7. Maybe this is linked to #223 (Incorrect relative paths in sourcemap?)

[jhnns]

I know that the paths inside the source-map may be broken depending on your setup. Haven't found the time to look into it so far.

However, I've merged a PR which resolved some issues with it. Maybe you could try sass-loader 3.2.2 and check if the problem is still there.

[cwagner22]

Now I can indeed edit the scss files directly in Chrome.

However I thought I could live edit the css properties using Devtools and have Chrome automatically update the scss source file. (And then I could simply hit Ctrl+S to save the file or use the history feature to see the changes).
Any idea if it could be possible? For example I'm often making small styling changes using devtools and when I'm satisfied by the result I copy everything that I've changed to my IDE, which is a pain.

[donaldallen]

@cwagner22 Wonder if you're still having this issue? I'm having the same problem. I swear I was able to update the .scss file via changes made to the Styles tab in Elements, like this:

[alexander-akait]

@cwagner22 can your create minimal reproducible test repo? Seems something is wrong in style-loader (or in webpack config)

[alexander-akait]

/cc @donaldallen @cwagner22 friendly ping

[cwagner22]

Sorry I'm not using webpack in my current project. If I get this issue again in the near future I'll try to make a test repo. (but the default config should be enough to reproduce it, if the issue is still not fixed)

[alexander-akait]

I just tested this feature, it works fine. Closing due to inactivity. Please test with latest version and have correctly configuration. Thanks!

[bmihelac]

I have just tried this with npm run test-source-map from latest version of sass-loader and while filename is correct, it is not possible to save it from chrome devtools.

I hope screenshot will help but let me know if anything else can be done by my side:

Warning triangle is displayed when saving file.