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

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
            }
        }
    }
}