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

Posted 2023-02-22

【中文标题】如何将 Chrome 开发人员工具 Inspector 中的 CSS 更改保存到 .vue 文件

【英文标题】：How to save CSS changes from Chrome developer tools Inspector to .vue file

【发布时间】：2019-12-22 15:17:12

【问题描述】：

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

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

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

【参考方案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