Webpack: Broke page styles when live changing it n Chrome DevTools with webpack template

[marcinlesek]

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 works fine with Chrome Browser.

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 https://stackoverflow.com/questions/48407862/page-styles-break-when-i-change-styles-in-chrome-devtools-with-webpack-hmr

Thanks in advance.

Best regards,
Marcin

[marcinlesek]

For everyone looking for solution:

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

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

Hope this will help anyone! :)

Best,
Marcin

[filippolcr]

For everyone looking for solution:

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

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

Hope this will help anyone! :)

Best,
Marcin

Thanks Man, it works well with Nuxt!

[lindsaylee]

@filippolcr I am running into the same issue in Nuxt, but I'm fairly new to the setup and am not sure where to change this setting in my project. For Nuxt is it also in config/index.js?

[christophwolff]

@filippolcr This wont work for me in nuxt. I extended the vueloader config. How did you add this config? Thank you

[christophwolff]

@filippolcr @filippolcr I fixed it by adding extractCSS: true to the build property in nuxt.config.js https://nuxtjs.org/api/configuration-build/#extractcss

[christophwolff]

@filippolcr @filippolcr Ok. This created a css flicker error when the extracted css wanst loaded. I have no idea then.

[christophwolff]

i fixed it with disabling the sourceMaps for scss files with the loader property

....
build: {
    loaders: {
      scss: { sourceMap: false }
    },
....

https://nuxtjs.org/api/configuration-build/#loaders

[homerjam]

@filippolcr I am running into the same issue in Nuxt, but I'm fairly new to the setup and am not sure where to change this setting in my project. For Nuxt is it also in config/index.js?

// nuxt.config.js

...
build: {
    loaders: {
        scss: { sourceMap: false },
        vue: { cacheBusting: false },
    },
}
...

[lsotoangeldonis]

@filippolcr I am running into the same issue in Nuxt, but I'm fairly new to the setup and am not sure where to change this setting in my project. For Nuxt is it also in config/index.js?

// nuxt.config.js

...
build: {
    loaders: {
        scss: { sourceMap: false },
        vue: { cacheBusting: false },
    },
}
...

This has seem to work using Nuxt v2.12.2, thank you @homerjam, but now I wonder why is this workaround necessary? and, why those options aren't set by default? also what would be the side effects of disabling cache and source maps?

EDIT: for now i'm playing safe with this variant:

```js
// nuxt.config.js

...
build: {
loaders: {
scss: { sourceMap: process.env.NODE_ENV === 'production' },
vue: { cacheBusting: process.env.NODE_ENV === 'production' },
},
}
...
```
I'm actually using "sourceMap: true" because is working fine for me by now. still needing more testing thought

[jonasdumas]

For nuxt.js this was buggy for me :

  loaders: {
        scss: { sourceMap: false },
        vue: { cacheBusting: false },
    },

The solution found to solve this devTools issue:
add this to build in nuxt.config.js:
cssSourceMap: false,

[KaliaJS]

I'm still having the same problem. Someone can explain why ? I'm interested to know if it's a problem from webpack or vue ?