Question: 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.

Answer: 
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](https://stackoverflow.com/questions/56127998/vue-cli-sourcemaps-to-style-part-of-vue-component-file/61307782#61307782)
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!