VS Code配置SASS编译任务：如何实现编译当前活跃SCSS文件及匹配所有SCSS文件

原写法报错原因 #

"command": "node-sass .scss .css" 报错的核心逻辑：shell 语法下单独书写 .scss 不是通配符匹配规则，而是尝试读取当前目录下名为 .scss 的无后缀文件，node-sass 找不到对应目标文件自然抛出错误。
有效的通配符匹配必须配合 * 占位符使用，且不能直接在输出路径上写通配符，否则会被shell解析为目录下已存在的文件名传递给程序，引发参数错乱。

可落地的任务配置 #

VS Code 任务系统内置变量、node-sass 原生参数完全可以覆盖两类编译需求，将以下任务片段合并到原有tasks.json的tasks数组中即可生效，无需额外安装第三方工具。

编译当前编辑器打开的活跃SCSS文件 #

无需写死固定文件名，按下快捷键直接编译当前选中打开的SCSS源文件：

{
  "label": "Sass Compile (Active File)",
  "type": "shell",
  "command": "node-sass ${file} ${fileDirname}/${fileBasenameNoExtension}.css",
  "group": {
    "kind": "build",
    "isDefault": true
  },
  "problemMatcher": "$sass"
}

• ${file} 内置变量：自动读取当前活跃编辑文件的完整绝对路径
• ${fileDirname} 内置变量：当前活跃文件所在的目录路径
• ${fileBasenameNoExtension} 内置变量：当前活跃文件去掉后缀的文件名（例如打开a.scss时，变量值为a）
• 编译后的CSS文件自动存储在SCSS源文件同目录下，文件名与源文件保持一致
• 将该任务设为默认构建任务后，直接按下CTRL + SHIFT + B即可触发，无需手动从任务列表选择

批量匹配编译工作区内所有SCSS文件 #

无需指定固定目录，递归扫描整个工作区的SCSS文件完成编译：

{
  "label": "Sass Compile (All SCSS)",
  "type": "shell",
  "command": "node-sass --recursive \"${workspaceFolder}\" --output \"${workspaceFolder}\" --ext css",
  "group": "build",
  "problemMatcher": "$sass"
}

• --recursive 为node-sass原生参数，支持递归扫描指定目录下的所有SCSS文件
• ${workspaceFolder} 内置变量：指向当前打开的工作区根目录
• --output 参数指定编译后CSS文件的输出位置，与源SCSS文件保持同层级
• --ext css 参数指定输出文件的后缀为.css

优化提示 #

原配置中使用的$eslint-compact问题匹配器适配ESLint的输出格式，替换为$sass后可以正确识别node-sass抛出的语法错误、文件缺失等异常，直接在VS Code问题面板标注报错位置，无需手动在终端翻查日志。

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