使用Gulp编译SCSS后CSS文件未保存至指定目录问题排查

核心问题分析 #

1. 源路径错误 #

你的项目SCSS目录是public/scss/，但Gulp任务中写的是/public/sass/**/*.scss：

• 目录名拼写错误：sass需改为scss
• 绝对路径问题：/public会指向系统根目录，而非项目内的public文件夹，需改为相对路径./public/scss/**/*.scss

2. 重复执行编译流程 #

代码中先后调用了两次SCSS编译工具（sass()和dartsass()），这会导致编译逻辑冲突，打断正常输出流程。

3. Sourcemaps初始化顺序错误 #

sourcemaps.init()必须在SCSS编译前执行，当前代码在第一次编译后才初始化sourcemaps，不仅无法生成有效sourcemap，还会干扰文件输出。

修正后的Gulp任务代码 #

gulp.task("sass", function () {
  return (
    gulp
      .src("./public/scss/**/*.scss")
      .pipe(header(`$imgPath: "${imgPath}";`))
      .pipe(sourcemaps.init())
      .pipe(dartsass({
        outputStyle: "expanded",
      }).on("error", sass.logError))
      // .pipe(gcmq())
      .pipe(cleanCSS())
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest("./public/css"))
  );
});

额外优化建议 #

• 只编译入口文件：下划线开头的_*.scss是partial文件（用于导入），单独编译会生成空文件，可将src路径改为./public/scss/*.scss，只编译根目录下的非partial文件。
• 检查imgPath变量：确保该变量已正确定义，未定义的变量可能导致静默编译异常。

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