Mini-css-extract-plugin: Sourcemap doesn't work with devtool option contain "eval"

[ElvisWang27]

• Operating System:
• Node Version: 10.15.2
• NPM Version: 6.4.1
• webpack Version: 4.41.6
• mini-css-extract-plugin Version: 0.9.0

Expected Behavior

Use the devtool options with "eval" such as "cheap-module-eval-source-map", the extract css file can map to the really css or sass file.

Actual Behavior

My entry file 'main.js' which import 'testSass.scss', with the devtool options "cheap-module-eval-source-map" to get the fast rebuild . But it'can not map the body style to the real sass file.

If I change devtool to "cheap-module-source-map" without 'eval', It works.

Code

// webpack.config.js
module.exports = {
  mode: 'development', // 'production'
  devtool: 'cheap-module-source-map',
  entry: {
    'learn': './src/main.js',
  },
  module: {
    rules: [ // 添加对模块处理特定规则
      {
        test: /\.s[ac]ss$/i,
        use: [{
          loader: MiniCssExtractPlugin.loader,
          options: {hmr: true}
          },
          {loader: 'css-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}},]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new HtmlWebpackPlugin(),
  ],
  devServer: {
    port: 9000,
    hot: true
  }
}

How Do We Reproduce?

You can use the config above . If cannot reproduce , I will give a repo later.

Addition

I found an hack with add the sourcemapPlugin with devtools in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29#issuecomment-382424129
new webpack.SourceMapDevToolPlugin({ filename: "[file].map", exclude: ["/vendor/"] }), js

[ElvisWang27]

Hi @sokra , has any solution?

[alexander-akait]

Yes, it is limitation, eval doesn't work with CSS, you need to use source-map, we need documented it