使用PhpStorm File Watcher无法生成CSS Source Map文件

检查File Watcher参数配置 #

PhpStorm的Sass File Watcher不会默认强制生成独立Source Map，得手动加参数：

• 打开你截图的File Watcher配置页
• 在Arguments输入框里，必须加上--source-map（新版Dart Sass）或--sourcemap=auto（老版本Ruby Sass）参数。适配你目录的完整参数示例：

  $FileName$:$ProjectFileDir$/public/css/$FileNameWithoutExtension$.css --source-map
  

确认Sass版本与参数冲突 #

• 如果你用的是官方主推的Dart Sass，默认应该生成Source Map，但要是参数里写了--no-source-map就会直接禁用，检查有没有这个坑
• 老版Ruby Sass得显式写--sourcemap=file才能生成独立的.map文件，而不是内联到CSS里

配置输出路径刷新规则 #

• 得让PhpStorm识别到生成的.map文件，在Output paths to refresh里加上.map的路径：

  $ProjectFileDir$/public/css/$FileNameWithoutExtension$.css:$ProjectFileDir$/public/css/$FileNameWithoutExtension$.css.map
  

  不然就算生成了.map文件，IDE目录里也可能不显示

终端手动验证排查 #

• 先绕开IDE，在项目根目录终端直接跑编译命令测试：

  sass public/scss/claim.scss public/css/claim.css --source-map
  

  如果终端能生成claim.css.map，那就是File Watcher的配置没调好；如果终端也不行，就更新Sass到最新稳定版试试

内容的提问来源于stack exchange，提问作者HectorB