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 had this issue, but only when I had multiple blocks in one component.

E.g.,

I couldn't work out the exact cause, except I noted that I could see that the sources devtools tab only ever shows one inline style block, so figure there's some fragile trickery there. My quick workaround was to simply move at least one of the style blocks into its own file.

I don't know why this worked. Hope it helps someone.