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

前端之家收集整理的这篇文章主要介绍了css – 在Chrome DevTools中实时更改时,破坏了Vue.js应用程序(Webpack模板)的页面样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

重现步骤

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

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

提前致谢.

最好的祝福,
马尔钦

最佳答案
我也遇到过这个问题,我可以通过在开发中禁用CSS源映射来防止这种情况.我仍在调查为什么这只发生在Chrome上,但至少我们可以开始寻找它.我不相信这是一个Webpack问题.

– 更新 –

我只是在我的config / index.js文件中将devtool更改为“eval-source-map”,一切正常.

file: config/index.js

...
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map'
...
原文链接:/css/427007.html

猜你在找的CSS相关文章