在 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

我也遇到过这个问题，我可以通过在开发中禁用 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'
...

Answer 2

我找到了另一个解决方案。感谢@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,
...

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

Answer 3

我遇到了这个问题，但只有当我在一个组件中有多个块时。

例如，

<style scoped>
...
</style>

<style>
...
</style>

我无法找出确切的原因，但我注意到我可以看到 sources devtools 选项卡只显示一个内联样式块，所以我认为那里有一些脆弱的诡计。我的快速解决方法是简单地将至少一个样式块移动到它自己的文件中。

<style scoped>
...
</style>

<style src="./my-component.unscoped.css"></style>

我不知道为什么会这样。希望它可以帮助某人。

Answer 4

在您的 webpack 配置文件中，您可以尝试为您的 sass 加载器配置启用源映射。

您需要按如下方式编辑您的文件：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                sourceMap: true
            }
        }
    }
}