I am using this amazing tool for working in the frontend with vscode.
It basically puts the browser and devtools inside of a vscode tab so you can work without leaving the editor. I think it gives a boost in productivity in frontend.
One of its features, though is to open a file (through sourcemaps) directly in the editor by clicking in the scss file inside its devtools.
This feature requires though to set up sourcemap overrides, and I tried to do it, but I don’t know enough of webpack and sage to understand what should I do. Can someone help me?
These are the examples that the plugin of vscode provides:
"webpack:///./~/*": "${webRoot}/node_modules/*"
Example:
"webpack:///./~/querystring/index.js"
-> "/Users/me/project/node_modules/querystring/index.js"
"webpack:///./*": "${webRoot}/*"
Example:
"webpack:///./src/app.js" -> "/Users/me/project/src/app.js"
"webpack:///*": "*"
Example:
"webpack:///project/app.ts" -> "/project/app.ts"
"webpack:///src/*": "${webRoot}/*"
Example:
"webpack:///src/app.js" -> "/Users/me/project/app.js"
Can somebody point me in the direction of the correct override?
An example link from one of the scss files: