Mini-css-extract-plugin: SourceMap not working with Webpack 4.8.1

[heyalbert]

Hey guys,

Sadly, sourcemap is not working at all. Webpack 4.8.1 doesn't generate a .map in combination with mini-css-extract-plugin and sass-loader. Any fix?

Plugin configuration:

        new MiniCssExtractPlugin({
            filename: 'css/styles.css'
        }),

Rules:

...
devtool: "source-map", // any "source-map"-like devtool is possible
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true },
                    },
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { sourceMap: true },
                    },
                    {
                        loader: 'sass-loader',
                        options: { sourceMap: true },
                    },
                ]
...

Output:

          Asset       Size      Chunks             Chunk Names
 css/styles.css  101 bytes        main  [emitted]  main
    ./bundle.js    412 KiB        main  [emitted]  main
./bundle.js.map   88 bytes  main, main  [emitted]  main, main
     index.html  230 bytes              [emitted]
Entrypoint main = css/styles.css ./bundle.js ./bundle.js.map ./bundle.js.map

As you can see, a style.css.map is not generated.

Furthermore: I started a project to try out different configurations.
https://github.com/heyalbert/webpack-starterkit

[alexander-akait]

@heyalbert interesting, looks like bug, feel free to investigate and send PR :+1:

[matallo]

I've been able to replicate and get both working, @heyalbert do you happen to have OptimizeCSSAssetsPlugin ?

[pldg]

I confirm that source maps will not be generated if OptimizeCSSAssetsPlugin is enable.

I'm using "webpack": "^4.8.3", "mini-css-extract-plugin": "^0.4.0", "optimize-css-assets-webpack-plugin": "^4.0.1"

[alexander-akait]

Looks like bug in OptimizeCSSAssetsPlugin, somebody create issue?

[hbobenicio]

Same issue here. When I use OptimizeCSSAssetsPlugin along side with MiniCssExtractPlugin, even if the project is configured to use source maps (devtool: 'source-maps' or with SourceMapDevToolPlugin), the source map is not generated.

[hbobenicio]

@evilebottnawi

I've created this issue there:
https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/53

[hbobenicio]

Got it working! Just realized that the defaults are {} and it's passed to cssnano. You need to setup the map property on it. Just did:

      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false
          }
        }
      })

and it worked for me. Created also a PR for better docs at their README.md

Anyway. I think this is not related to this project and this issue can be closed.
Maybe some docs could be improved here to, like replacing the suggested

new OptimizeCSSAssetsPlugin({})

to

      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false // set to false if you want CSS source maps
          }
        }
      })

Can anyone confirm if it works for you guys, before changing docs?

[pldg]

Still buggy, incorrect filename reference

[hbobenicio]

Yes... I see now your point, @pldg . You're totally correct, this is still buggy. Sorry for my blidness! And thanks for taking the time to explaining it.

[xalisys]

this works:
new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { map: { inline: false, annotation: true, } } })