Gulp无法监听SCSS子目录文件变更的技术求助

这个问题我之前也碰到过，核心原因是你的监听路径没有覆盖到子目录里的SCSS文件，咱们一步一步来解决：

1. 修复监听路径的匹配规则 #

你之前的监听逻辑应该只写了scss/*.scss，这个通配符只会匹配scss根目录下的.scss文件，完全忽略了子目录里的内容。而修改default.scss能触发全量编译，是因为你的编译任务是基于default.scss（它应该已经通过@import导入了子目录的所有文件），只要根目录文件变化就会执行编译。

把监听路径改成scss/**/*.scss就行——**是Gulp支持的通配符，代表任意深度的子目录，能完美覆盖base、components这些子目录里的所有.scss文件。

给你一个Gulp 4版本的完整示例：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// 编译SCSS的核心任务
function compileSass() {
  // 基于default.scss编译，因为它导入了所有子目录文件
  return gulp.src('scss/default.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
}

// 修复后的监听任务
function watchFiles() {
  // 关键修改：用**匹配所有子目录的SCSS文件
  gulp.watch('scss/**/*.scss', gulp.series(compileSass));
}

// 导出默认任务，启动时先编译一次再开始监听
exports.default = gulp.series(compileSass, watchFiles);

2. 确认编译任务的依赖逻辑 #

确保你的default.scss确实通过@import导入了子目录里的文件，比如：

// default.scss
@import './base/reset';
@import './components/button';
// 其他子目录文件的导入语句

这样子目录文件修改后，编译default.scss就能把最新变更合并到最终的CSS文件里。

额外排查小提示 #

• 如果修改后还是没触发，试试重启Gulp服务，有时候旧的监听进程会残留
• 检查子目录名称和通配符路径是否有拼写错误
• 如果你用了缓存类插件（比如gulp-cache），可以暂时禁用它，排查是否是缓存导致的问题

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