optimize-css-assets-webpack-plugin: Source Maps not working with Webpack 4.8

Have you read PostCSS sourcemaps options section? For example if you need inline source maps, use:

new OptimizeCSSAssetsPlugin({
  cssProcessorOptions: {
    map: {
      inline: true,
    }
  }
})

If you need external source maps, use:

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

Just figured it out! (this helped with a useful snippet: https://github.com/ben-eb/cssnano/issues/302)

Actually this is not a bug, but can be improved (with docs or better defaults to identify if there are settings in webpack to generate source-maps…)

You just need to set the map property to cssProcessorOptions (something like this):

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

If no other cssProcessor is specified, then cssnano is used by default. Then the plugin will pass the cssProcessorOptions as options to it. So searching on how to do it with cssnano gave me that hint on how to properly configure cssnano.

Maybe docs improvements could be made so that it would become clearer on how to use cssProcessorOptions (at least for the default processor, cssnano). Or maybe this plugin could somehow know if the webpack setup is configured to use source-maps or if the css itself has it to set map property to cssnano in that case (sorry if I’m talking silliness, I’m not a webpack nor a cssnano expert at all… It was just a painful debugging session…)

Or we may add a special sourceMap option to OptimizeCSSAssetsPlugin which will do the same under the hood similar to postcss-loader.

For example:

new OptimizeCSSAssetsPlugin({ sourceMap: true })

new OptimizeCSSAssetsPlugin({ sourceMap: 'inline' })

PR is welcome 😃

Thanks for all the effort to get the source maps working. Using the tips here and installing the 5.0 release I am now able to get external map files generated for my project and they are working in the browser.

However, there is still something a bit off with the paths that are generated and placed into the map file. When I do a non production build without using this optimize css plugin the generated map file has entries in it that look like this:

{"version":3,
"sources":[
  "webpack:///./src/components/controlbar/css/endpoint-mode-selector.less",
  "webpack:///./src/index.css",
  "webpack:///./src/assets/Roboto-local.css", 

When I do a production build using this optimize css plugin the map file looks like this:

{"version":3,
  "sources":[
    "/data/hbird/src/components/controlbar/css/endpoint-mode-selector.less",
    "/data/hbird/src/index.css",
    "/data/hbird/src/assets/Roboto-local.css",

I am using the config suggested above.

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

This still works in the browser, but the file system mappings look a bit odd in the developer tools. Is there some way to get the map file to be generated using the same webpack:///./src style file references? I did experiment with turning off the source maps on the css-loader and less-loaders which did change things a bit but nothing gets the same output as not using the optimize css plugin.

Here is a snippet of the webpack config (extractCSS and genSourceMaps are true):

     {
        test: /\.less$/,
        include: props.srcRoot,
        use: [
          {loader: extractCSS ? MiniCssExtractPlugin.loader : "style-loader"},
          {loader: "css-loader", options: {sourceMap: genSourceMaps}},
          {loader: "less-loader", options: {sourceMap: genSourceMaps}}
        ]
      },

I would like to fix the issue described by @medington for the sake of privacy and consistency. Note that customizing https://webpack.js.org/configuration/output/#outputdevtoolmodulefilenametemplate doesn’t help.

Is this problem solved? My sourcempas is still empty. like this: {"version":3,"file":"./euidocs/euidocs.css","sources":[],"mappings":";A","sourceRoot":""}

@medington you can try optimize-cssnano-plugin which is more accurate with source maps.