我正在尝试建立一个工作流,我想在其中使用 Chrome DevTools
Inspector 将我的 CSS
更改直接保存到我的 。 vue
文件。
DevTools Workspaces
可以完成这项工作,但它需要保存和自动重新加载。或者我必须将更改从 Inspector
复制到 Sources Panel
。我想绕过它。
我的猜测是通过Webpack
提取CSS 文件
。但我不确定,如果这将转换回 .vue
文件。
最佳答案
到 vue.conig.js
添加:
css: { sourceMap: true },
这将启用 css sourcemaps。然后只需将 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
关于css - 如何将 Chrome 开发人员工具检查器中的 CSS 更改保存到 .vue 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57522240/