在 PhpStorm 中配置 File Watcher 来自动将 SCSS 文件编译成压缩后的 CSS 文件，你需要按照以下步骤操作：

1. 安装 SCSS/Sass 编译器：
   确保你已经在你的计算机上安装了 SCSS 的编译器。通常这意味着需要安装 Node.js 和 npm，然后安装 sass 包：

   npm install -g sass
   

2. 打开 File Watcher 设置：
   在 PhpStorm 中，通过选择 File > Settings (对于 macOS 是 PhpStorm > Preferences) 打开设置窗口。

3. 进入 File Watcher 配置：
   在设置中，导航到 Tools > File Watchers。

4. 添加一个新的 File Watcher：
   点击右下角的 + 图标来添加一个新的 watcher。从列表中选择 <custom> 或者 SCSS。

5. 配置 File Watcher：
   在新打开的 File Watcher 配置窗口，填写以下信息：

   • Name: 给你的 File Watcher 起一个有意义的名字，比如 “SCSS Compiler”。
   • File type: 选择 “SCSS” 作为监视的文件类型。
   • Scope: 你可以指定只监视项目中的文件、当前文件或者自定义的范围。
   • Program: 输入 sass 编译器的路径，如果你通过 npm 全局安装，通常输入 sass 就可以了。
   • Arguments: 输入编译器参数。为了输出压缩后的文件，可以使用以下参数：

     --style=compressed $FileName$:$FileNameWithoutExtension$.css
     

     这告诉编译器采用压缩风格，并且指定输入和输出的文件名。

   • Output paths to refresh: 输入生成的 CSS 文件路径：

     $FileNameWithoutExtension$.css
     

   • Working directory: 使用宏 $FileDir$ 设置工作目录，这意味着 File Watcher 将在 SCSS 文件所在的目录中执行。

6. 保存设置：
   确认所有设置正确后，点击 “OK” 或 “Apply” 来保存你的 File Watcher 配置。

现在，每当你保存一个 .scss 文件时，PhpStorm 将会自动使用你配置的 File Watcher 运行 sass 命令，编译 SCSS 文件并输出压缩后的 CSS 文件。

编译后的css文件