Mini-css-extract-plugin: Trouble getting source map to work

[lewebsimple]

Maybe I'm missing something but I can't get the sourcemaps to generate either as a separate file or inline. I'm using the latest webpack (4.1.1) and mini-css-extract-plugin (0.2.0).

Relevant webpack 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},
          },
        ]
      },

...and plugin:

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

Do I need to specify devtool property also ?

[lewebsimple]

Nevermind, I figured it out... turns out you actually need devtool: 'source-map' after all!

[yantakus]

Why doesn't it work with devtool: 'cheap-module-eval-source-map'? Would be very useful to have this information in the readme.

[SirKlaus]

Good Question @yantakus !
I have the same problem with stylus instead of sass.
And i can't use devtool: 'source-map' because then the build takes way to much time.

I finally got it work with devtool: 'cheap-module-eval-source-map' and

plugins: [
    new SourceMapDevToolPlugin({
        filename: "[file].map",
        exclude: ["/vendor/"]
    })
]

They say you should not do that:

Never use both the devtool option and plugin together.
https://webpack.js.org/configuration/devtool/

But it works!

Now i have this:

Instead of this:

And the build still is fast.
Would be nice if someday it will work without this hack.

[gkatsanos]

Could the maintainer of this plugin clarify whats happening here?

[andrastothtw]

I have an error when both css-loader and less-loader is set to sourceMap: true.

use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'less-loader',
            options: { sourceMap: true },
          },
        ],

The error message:

ERROR in ./src/styles/main.less
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'context' of undefined
at Object. (/Users/andras.toth/IdeaProjects/contact-form-frontend/node_modules/css-loader/lib/loader.js:101:58)
at Array.map ()
at Object. (/Users/andras.toth/IdeaProjects/contact-form-frontend/node_modules/css-loader/lib/loader.js:99:31)`

I'm loading the file in our index.js file like this: require('./src/styles/main.less');

And of course no css.map file is generated.

[alexander-akait]

@andrastothtw problem in css-loader, please look on stack before posting. Thanks!

[gkatsanos]

source-map doesn't work with HMR.

[heyalbert]

Same configuration as lewebsimple but newer webpack version (4.8.1). Sourcemap doesn't work at all. Bug? How does your solution looks like?

[yamass]

@lewebsimple Could you please reopen this issue? Using devtool: 'source-map' might be ok for production builds but not for development (much too slow). This needs to get fixed.

I personally use devtool: 'cheap-module-source-map' as a workaround, but it is still much slower than cheap-module-eval-source-map.

[Pushplaybang]

yeah seriously, this is confusing and frustrating as all hell.

[Younghun-Jung]

Have any solution?
CSS sourcemap is not working on webpack-dev-server in Webpack4 with MiniCssExtractPlugin...

[mwilkins91]

Same issue,

    new webpack.SourceMapDevToolPlugin({
      filename: '[name].[chunkhash:8].js.map',
      exclude: /vendors*(.+?).js/,
      lineToLine: true,
      columns: false,
    }),

results in no sourcemaps being generated for extracted css

[alexander-akait]

Please don't spam difference issue in other issue, your problem can't be solved here never, source map getting from css-loader, so many features can't be supports due limitation loader api, we need implement out of box css support in webpack to solve many of them, thanks

[ivan-vilches]

Any solution?

[phxism]

Solution to no CSS source map file generated under production mode in Webpack 4 it might help

[ProTip]

@SirKlaus you saved my day by helping wrap up a final loose end!

I used include: [/\.css$/] to generate only CSS source map files but otherwise this solution works great so far.