source map's in mini-css-extract-plugin

Question

I can't seem to get source maps to work with the mini-css-extract-plugin. I had them working with style-loader.

devtool: argv.mode === 'development' ? 'eval' : 'none',

[...]

test: /\.scss$|\.css$/i,
use: [
     {
          loader: MiniCssExtractPlugin.loader,
          options: {sourceMap: argv.mode === 'development', hmr: argv.hot},
     },
     {
         loader: 'css-loader',
         options: {sourceMap: argv.mode === 'development', importLoaders: 1},
     },

[...]

plugins: [
    [...]
    new MiniCssExtractPlugin({
        filename: argv.mode === 'development' ? '[name].css' : '[contenthash].css',
        chunkFilename: argv.mode === 'development' ? '[id].css' : '[contenthash].css',
    }),
]

A bit of brackground information: I've always used the style-loader to get hot module replacement to work in dev mode and mini-css-extract-plugin for production.

Now the mini-css-extract-plugin supports hmr which is awesome since i won't have to deal with FOUC in development anymore.

But having no source map to at least tell me from which file a style is coming from is annoying.

Answer 1

While writing the question i found a possible solution which did end up working.

I defined devtool as eval which is the cheapest option. I don't entirely get how it works but it isn't a real source map, rather it wraps the entire source in an eval statements and tells the browser that is a specific file which was fine with me but this strategy obviously can't work with css files.

What I did is define devtool as cheap-source-map which seems to be the fastest option that does not rely on eval statements.

I also think i completely misunderstood the sourceMap option of loaders. I only need them when generating a full source map which shows the original source code. (although i haven't tested that completely)