Live Sass Compiler导入SCSS保存不编译、自动启动watch-sass问题咨询

修改导入的SCSS分片保存后不触发编译的配置方法 #

• 先确认分片文件命名符合Sass规范：所有被主文件通过@use/@forward/@import引入的分片文件，文件名必须以_开头，例如_var.scss、_nav.scss。这类文件不会被单独编译输出，只会作为依赖被主文件纳入编译链路，命名不规范会直接导致依赖监听失效。
• 打开VS Code设置JSON文件：按快捷键Ctrl+Shift+P（macOS为Cmd+Shift+P）调出命令面板，输入Preferences: Open Settings (JSON)回车打开，添加以下配置：

{
  // 其他原有配置不要动，新增下面这些项
  "liveSassCompile.settings.partialsList": [
    "/**/_*.scss",
    "/**/_*.sass"
  ],
  "liveSassCompile.settings.watchTargets": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css" // 替换成你项目实际的CSS输出目录
    }
  ],
  "liveSassCompile.settings.useNewCompiler": true,
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".git/**"
  ]
}

• 检查主文件内的分片引入路径是否正确，必须写全相对路径，例如同目录下的_header.scss要写@use './header'，不能省略./直接写@use 'header'，路径解析错误会导致编译器无法建立主文件和分片的依赖映射，改动分片自然不会触发重编译。
• 配置完成后重启一次Sass监听，之后修改任意分片文件保存，都会自动触发主文件全量编译，直接输出更新后的CSS文件。
• 如果以上配置做完还是失效，直接替换成目前仍在维护的glenn2223版本Live Sass Compiler，老的ritwickdey版本已经停更多年，存在依赖监听的底层bug，没有修复可能。

打开工作区自动启动watch-sass监听的配置方案 #

分两种场景对应配置：

场景1：使用扩展自带的Sass监听能力 #

直接在刚才的settings.json里新增两项配置即可：

{
  // 其他原有配置保留
  "liveSassCompile.settings.autoWatch": true,
  "liveSassCompile.settings.autoStartWatchOnProjectOpen": true
}

配置完重启VS Code，后续打开包含SCSS文件的工作区时，扩展会自动启动监听，不需要手动点底部的「Watch Sass」按钮。

场景2：使用自定义的watch-sass脚本任务（比如npm脚本、shell命令） #

1. 按Ctrl+Shift+P（macOS为Cmd+Shift+P）调出命令面板，输入Tasks: Configure Task，选择你已经创建好的watch-sass任务，会自动在项目根目录生成.vscode/tasks.json配置文件。
2. 在对应任务的配置项里添加runOptions字段，示例配置如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "watch-sass",
      "type": "npm", // 如果是shell命令写的任务就改成shell
      "script": "watch-sass", // 对应package.json里的脚本名，shell类型的话替换为command字段写具体命令
      "runOptions": {
        "runOn": "folderOpen"
      },
      "problemMatcher": []
    }
  ]
}

3. 配置完成后第一次打开工作区时，VS Code会弹出任务自动运行的权限提示，选择「始终允许此工作区自动运行任务」即可，后续每次打开工作区都会自动启动watch-sass监听。

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