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

问题

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

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

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

回答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.

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

来源：https://stackoverflow.com/questions/49372717/broke-page-styles-of-vue-js-app-webpack-template-when-live-changing-it-in-chro