Broke page styles of Vue.js app (Webpack template) when live changing it in Chrome DevTools
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! :)
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'
...