Webpack - 使用css-loader和sass-loader时奇怪的源映射路径

Question

我正在使用Webpack以及css-loader，sass-loader和extract-text-webpack-plugin插件来为我的应用程序捆绑样式。

但是，我正在使用下面显示的插件看到奇怪的源地图/资源路径：

实际app.scss路径为./src/styles/app.scss

然而，文件的源映射路径变为./src/styles/src/styles/app.scss和绝对资源路径：
C:/Users/m51n/source/repos/source-map-path/src/styles/src/styles/app.scss（不存在）

我创建了一个示例项目here - 使用sass-loader docs中的源地图示例和extract-text-webpack-plugin文档中的代码here < / p>

以下是上述项目中使用的webpack.config.js：

const CleanWebpackPlugin = require("clean-webpack-plugin")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const path = require("path")

module.exports = {
  entry: {
    app: "./src/styles/app.scss"
  },
  devtool: "inline-source-map",
  output: {
    filename: "[name].[hash].js",
    path: path.resolve("./dist"),
    // devtoolModuleFilenameTemplate: (info) => {
    //   console.log(info.resourcePath)
    //   console.log(info.absoluteResourcePath)

    //   return `webpack:///${info.resourcePath}`
    // }
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: ["style-loader"],
          use: [
            {
              loader: "css-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            }
          ]
        })
      }
    ]
  },
  resolve: {
    extensions: [".js", ".scss", ".css"]
  },
  plugins: [
    new CleanWebpackPlugin(["dist"]),
    new HtmlWebpackPlugin({
      template: "src/index.html"
    }),
    new ExtractTextPlugin({
      filename: "app.[contenthash].css"
    })
  ]
}

在这种情况下，插件返回的预期源映射路径为./src/styles/app.scss和磁盘上存在的绝对资源路径：
C:/Users/m51n/source/repos/source-map-path/src/styles/app.scss

如何重写上面的示例代码，以便获得所需的源地图路径？

相关GitHub问题供参考： https://github.com/webpack-contrib/sass-loader/issues/484