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 but it also exists on 64.X.XXX version.

I'm adding here: package.json: https://gist.github.com/marcinlesek/a7e6076ce4befe2e810743fdbaf81480

webpack.base.conf.js: https://gist.github.com/marcinlesek/80cbf27b6ef4172248709f32c257d0cd

What is expected?

The application should works fine with Chrome Browser and I should be able to disable/change styles in Chrome Dev Tools.

What is actually happening?

When I change style via Chrome dev tools it broke all styles (after changing or disabling one property) that page looks like in pure HTML without any line of style code. Fresh dev tools setup and Chrome reinstall doesn't help. What is a bit tricky, on Firefox 58.0.2 everything works correctly.

---

My collegues also had this problem, so it convince me that it isn't my local bug but something bigger on Vue side. Also find some questions regarding this bug, like Page styles break when I change styles in Chrome DevTools with Webpack HMR

Thanks in advance.

Best regards, Marcin

Answer 1

I find another solution. Thanks to answer of @munstrocity regarding changing cheap-module-eval-source-map to eval-source-map. Unfortunately, this change didn't fix for me my styles in Chrome Dev Tools but give me good point to check.

After a bit I found, that changing cacheBusting: true, to false in config/index.js help to solve that and now it's possible to change style in Chrome Dev Tools.

// 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,
...

Hope this will help anyone! :)