Enable sourceMap in devMode without FOUC

[Armour]

I'm submitting a

• [ ] Bug report
• [x] Feature request
• [ ] Performance issue
• [ ] Regression (a behavior that used to work and stopped working in a new release)
• [ ] Documentation issue or request
• [ ] Other... Please describe:

Current behavior

Enable css-loader sourceMap option will cause FOUC.

Expected behavior

No FOUC when sourceMap enabled for css-loader.

Minimal reproduction of the problem with instructions

In webpack.config.base.babel.js:

...
      // Use a list of loaders to load css files
      {
        test: /\.css$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: !devMode, importLoaders: 1 } }, // TODO: enable sourceMap in devMode without FOUC
          { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [postcssImport, postcssPresetEnv, cssnano] } },
        ],
      },
      // Use a list of loaders to load scss files
      {
        test: /\.scss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: !devMode, importLoaders: 2 } }, // TODO: enable sourceMap in devMode without FOUC
          { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [postcssImport, postcssPresetEnv, cssnano] } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
...

simply change !devMode to true will cause the FOUC.

What is the motivation / use case for changing the behavior?

SourceMap support in development.

[Armour]

Related: https://github.com/webpack-contrib/css-loader/issues/613 https://github.com/facebook/create-react-app/pull/3202