Sass 在gulp中查看递归scss文件

我正在使用gulp从一个基本主题编译几个主题。如果对子文件进行更改，watch将无法识别这些更改。只有当这些主题的文件发生更改时，它才能识别这些更改

我的文件夹结构

├── node_modules
├── src/
│   ├── base/
│   │   ├── bootstrap
│   │   └── custom
│   ├── themes/
│   │   ├── theme1.scss
│   │   └── theme2.scss
│   └── main.scss
└── gulpfile.js

theme1.scss导入main.scss main.scss从自定义目录导入所有引导文件和_all.scss

我的吞咽配置：

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});

如果我尝试将src/***.scss用作gulp.src，它会尝试编译src/base/bootstrap和src/base/custom中的每个文件，然后崩溃，因为找不到变量

我想要达到的目标： 观察者在src/base/custom/_header.scss中看到更改，并编译theme1.scss和theme2.scss

---

有人能帮我相应地设置配置吗？

似乎没有监视任务。您需要有一组不同的文件来监视和编译

使用要监视的文件定义一个监视程序任务：

一饮而尽

大口喝3

编译函数保持不变。这里src glob指向要编译的文件：

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});

---

这个答案是gulp3语法。如果OP使用的是gulp4，则观察任务将无法按所示工作。正如您所观察到的，问题是gulp3语法。因此答案是gulp3语法。不，你不能从OP的任何代码中判断他使用的是gulp3还是gulp4。他的代码采用gulp3风格，在gulp4中运行得非常好。您的答案代码在gulp4中不起作用。他很可能在用gulp4。你说得对，我会编辑回复。我自动假设它是3，因为该格式不是建议的4格式。有必要告诉我们您使用的是哪个版本的gulp。在你们的终端展示中，gulp-v是什么？

// Watch for file changes in any .scss file
gulp.task("watch-styles", function() {
  var watcher = gulp.watch(['src/**/*.scss'], ['styles']);
  //var watcher = gulp.watch(['src/base/custom/_header.scss'], ['styles']);
});

gulp.task('styles', function () {
    gulp.src('src/themes/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cleanCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./css/themes'));
});