Question

重现的步骤

我使用vue-cli模板从webpack引导了应用程序。我在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 Source maps来防止这种情况。我仍在调查为什么仅在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的回答。不幸的是，此更改不能为我解决我的样式，但可以帮助我进行检查。

稍后我发现，将cacheBusting: true,中的false更改为config/index.js可以解决此问题，现在可以在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

在您的webpack配置文件中，您可以尝试启用源映射以进行sass loader配置。

您需要按照以下步骤编辑文件：

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

Answer 4

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

例如，

<style scoped>
...
</style>

<style>
...
</style>

我无法找出确切的原因，除了我注意到我可以看到sources devtools选项卡只显示了一个内联样式块之外，因此发现那里存在一些脆弱的骗局。我的快速解决方法是将至少一个样式块移至其自己的文件中。

<style scoped>
...
</style>

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

我不知道为什么这样做。希望对别人有帮助。

在Chrome DevTools中实时更改时，破坏了Vue.js应用程序（Webpack模板）的页面样式

重现的步骤

期待什么？

实际发生了什么？

4 个答案: