Broke page styles of Vue.js app (Webpack template) when live changing it in Chrome DevTools

Question

Steps to reproduce

I have application bootstrapped from vue-cli with a webpack template. I\'m running it on Chrome 65.0.3325.146

Answer 1

I've encountered the issue as well, and I was able to prevent this by disabling CSS Source maps in development. I'm still looking into why this only happens on Chrome, but at least we can start looking there. I don't believe this is a Webpack issue.

-- Updated --

I simply changed the devtool to "eval-source-map" in my config/index.js file and everything works.

file: config/index.js

...
// https://webpack.js.org/configuration/devtool/#development
devtool: 'eval-source-map'
...