使用VS Code Compile Hero时如何让导入.styl文件保存触发重编译

Compile Hero默认未开启Stylus依赖追踪，所以子模块文件变更不会触发主文件重编译，按以下步骤配置即可解决：

1. 编辑VS Code配置 #

直接打开项目工作区的.vscode/settings.json文件，添加以下配置：

{
  // 核心：开启Stylus依赖追踪，自动监听所有被引入的子文件
  "compile-hero.stylus-track-imports": true,
  // 配置项目主Stylus入口文件（单入口项目必填，多入口项目可省略）
  "compile-hero.stylus-main-file-path": "./src/styles/main.styl",
  // 禁止下划线开头的partial子文件单独编译生成冗余CSS
  "compile-hero.stylus-compile-partial-files": false,
  // 可选：自定义CSS输出路径，按需修改
  "compile-hero.stylus-output-directory": "./dist/css"
}

2. 重启生效 #

配置保存后，点击VS Code底部状态栏的Compile Hero开关，先关闭再重新开启，或直接重启VS Code，配置即可生效。

异常排查 #

如果配置后仍不生效，可检查以下两点：

• 所有import路径的大小写、相对路径写法正确，避免跨系统路径兼容问题
• 子Stylus文件没有被加入files.exclude或compile-hero.exclude配置的排除列表

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