All non separate-file sourceMap devtool options break layout when changing CSS from Chrome Dev Tools

What is the current behavior?
When I use anything else besides an external source map file option as a value in the dev option (for example “source-map”), 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.)
39046259-db556168-4495-11e8-99d9-b366b8cb976f

If the current behavior is a bug, please provide the steps to reproduce.

  • use webpack-dev-server
  • use cheap-module-eval-source-map
  • modify CSS properties from devtools (see gif above)

What is the expected behavior?
Layout should just update the properties modified.

Other relevant information:
webpack version: 2.x + 4.x
Node.js version: 8.x , 9.x
Operating System: macOS Sierra 10.12.6 (16G1212)
Additional tools: Chrome Version 66.0.3359.139 (Official Build) (64-bit)

Author: Fantashit

1 thought on “All non separate-file sourceMap devtool options break layout when changing CSS from Chrome Dev Tools

  1. I think i might have accidentally found the source of this issue:

    {
        test: /\.s?css$/,
        include: [ context.source ],
        use: [
            { loader: 'vue-style-loader', options: { sourceMap: true} }, // <-- true
            { loader: 'css-loader', options: { sourceMap: true } }, //<-- true
            { loader: 'postcss-loader', options: { sourceMap: true} }, //<-- true
            { loader: 'sass-loader', options: { sourceMap: false } } //<-- false
        ]
    },

    setting every other loader sourceMap to true but sass-loader does fix the issue for me and i do get correct sourceMap on the devtools 😮

Comments are closed.