VS Code中Less自动生成文件无法通过SFTP扩展自动上传求助

方案1：配置SFTP/FTP-Simple的监听规则 #

大部分FTP类扩展支持监听文件变更，你可以修改扩展配置，让它监听生成的.css和.min.css文件，或者在Less文件保存时触发关联文件的上传。

针对SFTP扩展 #

在.vscode/sftp.json中添加watchers配置，监听Less编译后的输出文件：

{
  "name": "Your Server",
  "host": "your-host",
  "protocol": "sftp",
  // 其他基础配置...
  "watchers": [
    {
      "files": "**/*.css",
      "autoUpload": true,
      "autoDelete": true
    },
    {
      "files": "**/*.min.css",
      "autoUpload": true,
      "autoDelete": true
    }
  ]
}

当Less编译工具保存Less文件并生成CSS时，这个配置会在CSS文件发生变更时自动触发上传。

针对FTP-Simple扩展 #

打开FTP-Simple的配置文件（通常是.vscode/ftp-simple.json），在remotePath同级添加watch配置：

{
  "name": "Your Server",
  "host": "your-host",
  "port": 21,
  // 其他基础配置...
  "watch": [
    "**/*.css",
    "**/*.min.css"
  ],
  "watchOptions": {
    "autoUpload": true
  }
}

该配置会监听所有CSS和压缩CSS文件的变更，自动将其上传到服务器。

方案2：用VS Code任务关联Less编译与上传 #

如果扩展自带的监听不生效，可以通过VS Code的任务系统，在Less编译完成后触发上传命令。

1. 确保你已有Less编译的任务（比如使用lessc命令或Less扩展的编译功能）。
2. 在.vscode/tasks.json中添加复合任务，先完成Less编译再执行上传：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Compile Less",
      "type": "shell",
      "command": "lessc path/to/your/style.less path/to/your/style.css && lessc --clean-css path/to/your/style.less path/to/your/style.min.css",
      "problemMatcher": []
    },
    {
      "label": "Upload CSS Files",
      "command": "ftp-simple upload ${fileDirname}/style.css ${fileDirname}/style.min.css",
      // 若使用SFTP则替换为："sftp upload ${fileDirname}/style.css ${fileDirname}/style.min.css"
      "problemMatcher": []
    },
    {
      "label": "Compile & Upload",
      "dependsOn": ["Compile Less", "Upload CSS Files"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

之后可以给这个复合任务绑定快捷键，或者搭配runOnSave扩展，实现保存Less文件时自动触发编译+上传流程。

方案3：换用集成编译+上传的扩展 #

如果上述配置过于繁琐，可以尝试集成了Less编译和FTP上传功能的扩展，比如Easy Less FTP，这类工具能在编译Less的同时自动上传生成的CSS文件，省去单独配置的步骤。

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