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

Marchese

Is this something that should be instead submitted as a bug to Chromium? – Herndon

@SeanLarkin probably yes, but now I only detected this issue with Vue.js build on webpack template by vue-cli. So it could be also on this template/Vue side. I asked due to the fact, that maybe someone also was fighting with this issue. – Marchese

Answer 1

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

Marchese

Are you having this same problem with the newest Vue Cli version? – Disqualification

@JesúsFuentes I didn't check it, could you provide what exactly version do you mean? I could try in some spare time :) – Marchese

The last one, v3.8.2. Thanks. – Disqualification

We have also run into this problem - not being able to edit styles in the Chrome debugger without the page losing all styling. However, in our Vue CLI application, we don't have a config folder, let alone an index.js file. Should it be added? At the top level? Inside the src folder? – Contrite

This option doesn't exist anymore – Gamosepalous

Answer 2

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

Zobias

Answer 3

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

Lala

this fixed it for me. Thanks!! – Filippa

For me, this fixed it but when set to sourceMap: false! – Intersex

Anyone know how to do this in Gridsome? Merging this config in gridsome.config.js file just breaks the devServer – Wilding

Answer 4

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.

Pigeonhearted

Thanks James, it did! :) May I ask if those stylesheets were written in any preprocessor in your case? Stylus it was, for me. – Godden

Yeah I'm using scss for my stylesheets but just didn't include that in my code example here - to make my answer more generic – Pigeonhearted