Sourcemap doesn't work with devtool option contain "eval"

• 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

[alexander-akait]

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

[andy0130tw]

Follow-up: After reading webpack’s source code a little bit more, I manage to adjust the configuration accordingly so it produces the inline source map instead, without touching the source code of mini-css-extract-plugin:

{
  /* ... */
  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.SourceMapDevToolPlugin({
      test: /\.css$/i,
      filename: null,
      append: '/*# sourceMappingURL=[url] */',
    })
  ]
}

Normally we would turn off the devtool option, but if we are using an “eval-*-source-map” as its value, it is applying a different plugin EvalSourceMapDevToolPlugin. As long as the plugin we add is NOT touching JS files, we won’t interfere that option: https://github.com/webpack/webpack/blob/v5.67.0/lib/WebpackOptionsApply.js#L225-L246

This also solves issue #29 and seems more elegant than both the original and my previous solution.