css - 如何将 Chrome 开发人员工具检查器中的 CSS 更改保存到 .vue 文件

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

我正在尝试建立一个工作流,我想在其中使用 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/

相关文章:

javascript - TailwindCss 固定导航栏

javascript - 在 Vue.js2 中使用哪个生命周期 Hook 在页面加载时调用函数?

javascript - 将 ddsmoothmenu 子菜单侧更改为左侧

javascript - 为什么这个 javascript 不能正常工作?

插槽内的 Vue.js 方法不起作用

javascript - 如何处理在 vueJS 2 中使用 $emit 传递的参数?

javascript - 使用 Axios 将对象发布为 JSON

css - 不确定是 Chrome 上的渐变错误还是我的代码有问题

jquery - 多个文本字段时自动完成用户界面的 CSS 问题

javascript - 如何在组件内添加计数动画?