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

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#cachebustingcacheBusting: 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/#developmentdevtool: 'eval-source-map'...


I had this issue, but only when I had multiple blocks in one component.

E.g.,

<style scoped>...</style><style>...</style>

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.

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

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