css - 在 Chrome DevTools 中实时更改 Vue.js 应用程序(Webpack 模板)的页面样式

Question

重现步骤

我使用 webpack 模板从 vue-cli 引导应用程序。我在 Chrome 65.0.3325.146 上运行它，但它也存在于 64.X.XXX 版本上。

我在这里添加:package.json:https://gist.github.com/marcinlesek/a7e6076ce4befe2e810743fdbaf81480

webpack.base.conf.js: https://gist.github.com/marcinlesek/80cbf27b6ef4172248709f32c257d0cd

期望什么？

该应用程序应该可以在 Chrome 浏览器中正常运行，我应该能够在 Chrome 开发工具中禁用/更改样式。

实际发生了什么？

当我通过 Chrome dev tools 更改样式时，它破坏了所有样式(在更改或禁用一个属性之后)页面看起来像纯 HTML，没有任何样式代码行。新的开发工具设置和 Chrome 重新安装没有帮助。有点棘手的是，在 Firefox 58.0.2 上一切正常。

---

我的同事也有这个问题，所以它让我相信这不是我的本地错误，而是 Vue 方面的更大问题。还可以找到有关此错误的一些问题，例如 Page styles break when I change styles in Chrome DevTools with Webpack HMR

提前致谢。

最好的问候，马尔辛

Answer 1

我找到了另一个解决方案。感谢 @munstrocity 关于将 cheap-module-eval-source-map 更改为 eval-source-map 的回答。不幸的是，此更改并未修复我在 Chrome 开发者工具中的样式，但为我提供了一个很好的检查点。

我发现，在 config/index.js 中将 cacheBusting: true, 更改为 false 有助于解决这个问题，现在可以在 Chrome 开发者工具中更改样式。

// file: config/index.js

...
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: false,
...

希望这对任何人都有帮助! :)