I'm trying to set up a workflow where I'd like to work with the Chrome DevTools Inspector to save my CSS changes directly to my .vue file.
The DevTools Workspaces can do the job, but it requires a save and the automatic reload. Or I have to copy the changes from the Inspector to the Sources Panel. I'd like to bypass that.
My guess is to extract the CSS file via Webpack. But I'm not sure about it, if this is will translate back to the .vue file.
To vue.conig.js add:
css: { sourceMap: true },
This will enable css sourcemaps. Then just add your Vue project folder to Devtools Workspaces and you're good to go.
Keep in mind, there's a bug in Devtools: it won't link unicode files via workspaces, i.e. if you have any characters that are not US-ASCII, such file won't be linked for persistance via devtools. Relevant bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1071946
More details on vue css-sourcemaps here: Vue CLI sourcemaps to style part of vue component file
just make changes in .vue file at once, check in devtools if needed, and return to write in .vue file out of hand.
BTW, vue serve works GREAT!
