When using anything else besides "eval", layout breaks at every DevTools CSS modification

[gkatsanos]

When I use anything else besides "eval" as a value in the dev option, https://webpack.js.org/configuration/devtool/#development , when I modify a CSS property in my Chrome dev tools inspector, something weird happens: Chrome seems to add dynamically many copies of my rule/file which I modified (and naturally a broken layout.) Is this something seen somewhere else before?

[LinusBorg]

Please provide an actual runnable reproduction

[gkatsanos]

Thank you, unfortunately the complexity of the project is such that I am afraid it will not be possible. I was hoping someone has already witnessed this and there's already a solution. PS: we might have been able to solve it by upgrading to Webpack 4.

[gkatsanos]

Filed a bug to https://github.com/webpack/webpack/issues/7199, although I suspect it has to do with something vue specific.

[Radiergummi]

@gkatsanos I'm experiencing the same thing, though it seems to be limited to some components in my application. Since I'm currently at 250k lines of code, it's hard to estimate where this is coming from or create a reproduction app...

[uptownhr]

i am also getting the same problem. I'll try and provide some repo.

[uptownhr]

in my nuxt.config, i had

extend (config, {isDev, isClient}) {
      config.devtool = 'source-map'
      config.resolve.alias['vue'] = 'vue/dist/vue.common'
    },

Commenting out the devtool line fixed the issue for me. Not sure if this is what the OP was referring to as anything but 'eval'. For me, even after commenting this out, I still see my sass sourcemaps