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.

[ruben-grossmann]

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?