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'
...

Answer 2

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! :)

Answer 3

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.

Answer 4

Inside your webpack config file you can try to enable source map for your sass loader configuration.

You need to edit your file as follow:

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                sourceMap: true
            }
        }
    }
}