请参见2022年11月7日以下的编辑更新的答案
我也一直在研究这个问题，据我所知，没有办法将文件Map到文件系统，以便保存的文件自动保存在正确的位置。
不过你可以在样式编辑器中编辑你的css（或scss，less etc）文件，然后保存它们。这是一个手动过程，每次都会打开一个保存对话框。

如果您的源Map已设置，则在Web检查器中单击指向源文件的链接将在“样式编辑器”标签中打开它。您可以从该标签中保存文件，但每次都会询问您将文件保存到何处。

我希望我是错的，虽然我真的希望能够按下保存快捷方式（或单击保存链接）在样式编辑器，并有我的文件保存到正确的位置，而没有保存对话框的方式。

2022年11月7日

我已经做了一些进一步的调查，似乎只要文件路径在源Map中是正确的那么保存就可以工作。我有很多问题与webpack输出的源Map，Windows版本的Firefox和WSL2。我的文件在WSL2和Firefox在Windows中只能找到他们时，前缀为五个正斜杠，例如。file://///wsl$/path/in/wsl2/to/files不幸的是，webpack总是将其重写为三个正斜杠file:///，Firefox拒绝加载文件。
然后，我尝试在WSL2中使用新的（ish）能力运行Firefox来运行GUI应用程序。一旦Firefox处于相同的环境中，我就可以从根目录获得Webpack到输出路径，Firefox就能够在不弹出对话框的情况下保存这些文件。
下面是一个如何使用Laravel Mix设置源Map文件路径的示例，在Ubuntu环境中运行：

// @file webpack.mix.js

const mix = require('laravel-mix');
mix.webpackConfig({
  output: {
    devtoolModuleFilenameTemplate: info => {
      let path = '/home/MyUser/websites/example/webroot/path/to/css/';
      let filepath = `file:///${path}${info.resourcePath.slice(2)}`;
      return filepath;
    },
  }
})

总而言之，所有这些都与正确的源Map文件路径有关

您是否尝试过以下设置：

• Chrome -〉开发工具-〉设置（F1 = cog图标）-〉工作区-〉添加文件夹...

以下是有关使用源Map的一些附加信息

• https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps