如何将 Chrome 开发人员工具 Inspector 中的 CSS 更改保存到 .vue 文件答案

【问题标题】：How to save CSS changes from Chrome developer tools Inspector to .vue file如何将 Chrome 开发人员工具 Inspector 中的 CSS 更改保存到 .vue 文件
【发布时间】：2019-12-22 15:17:12
【问题描述】：

我正在尝试设置一个工作流程，我想在其中使用 Chrome DevTools 检查器将我的 CSS 更改直接保存到我的 .vue 文件中。

DevTools Workspaces 可以完成这项工作，但需要保存并自动重新加载。或者我必须将更改从Inspector 复制到Sources Panel。我想绕过它。

我的猜测是通过Webpack 提取CSS file。但我不确定，如果这将转换回.vue 文件。

【问题讨论】：

标签： css vue.js vuejs2 google-chrome-devtools

【解决方案1】：

只需在 .vue 文件中进行一次更改，如果需要，请检查 devtools，然后返回到无法控制的 .vue 文件中写入。

顺便说一句，vue serve 效果很好！

【讨论】：

【解决方案2】：

给vue.conig.js加：

  css: { sourceMap: true },

这将启用 css 源映射。然后只需将您的 Vue 项目文件夹添加到 Devtools Workspaces 就可以了。

请记住，Devtools 中有一个错误：它不会通过工作区链接 unicode 文件，即如果您有任何不是 US-ASCII 的字符，则不会链接此类文件通过 devtools 实现持久性。相关错误： https://bugs.chromium.org/p/chromium/issues/detail?id=1071946

更多关于 vue css-sourcemaps 的细节在这里：Vue CLI sourcemaps to style part of vue component file

【讨论】：