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

重现步骤 @H_673_2@我有一个使用webpack模板从vue-cli引导的应用程序.我在Chrome 65.0.3325.146上运行它,但它也存在于64.X.XXX版本上.

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

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

@H_673_2@有什么期待？

@H_673_2@该应用程序应该适用于Chrome浏览器,我应该可以在Chrome开发工具中禁用/更改样式.

@H_673_2@究竟发生了什么？

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

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

@H_673_2@提前致谢.

@H_673_2@最好的祝福,
马尔钦

file: config/index.js

...
// @R_874_10107@s://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map'
...