吞下所有的.scss文件并编译成css作为兄弟？

我有一个网站，有一些模块需要它们的css文件彼此独立，但我想使用SCS编写样式，并利用gulp进行自动刷新。是否可以监视给定目录树下任何scss文件中的更改，然后将更新文件的css作为同级写入？该结构基本上是这样的（尽管它可以将目录嵌套到更深处）：

我在别处有下面的Gulpfile设置来处理我的一般scss编译，但我不确定如何修改它来处理上述场景

// Requirements 
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

gulp.task('scss', function () {
  return gulp
    .src('scss/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss([require('postcss-flexibility')]))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('css'))
    .resume();
});

// Create 'watch' task
gulp.task('watch', function () {
  return gulp
    // Watch the input folder for change,
    // and run `sass` task when something happens
    .watch('scss/**/*.scss', gulp.series('scss'))
    // When there is a change,
    // log a message in the console
    .on('change', function (event) {
      console.log('File ' + event + ' was updated' + ', running tasks...');
    })
  ;
});

---

在

scss

任务中，将

gulp.src

glob更改为

'***.scss'

，将

gulp.dest

glob更改为

'

---

在您的

监视任务中，将glob也更改为
'***.scss'
。
这很接近，但似乎不太适合。直接使用
***.scss
我遇到了权限问题，因为它似乎在监视整个机器的文件系统。如果我更新了所有内容，使我的gulpfile.js与
custom
目录同级，那么我可以使用
custom/***.scss
和
custom/
，手表将按预期在所有内容上运行。是否可以使用类似于
。/***/.scss
或
/***.scss
的内容？如果我尝试其中任何一种方法，我会收到
消息：node\u modules\node sass\test\fixtures\depth first\\u vars.scss错误：未定义变量：“$import counter”。
如果我尝试其中任何一种方法，你可以使用
return src（['**.scss'，'！node\u modules/**'）]）
排除
文件夹。你知道为什么那可能不起作用吗？我觉得我已经尝试了所有的变体，但没有骰子。甚至连手表也不包括在内。css显然是按照预期编译的，所以它仍然可以工作，错误比任何东西都更令人讨厌。请注意--让它与
src（'../***/！node_modules/***/.scss'）
一起工作。
// Requirements 
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'expanded'
};

gulp.task('scss', function () {
  return gulp
    .src('scss/style.scss')
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss([require('postcss-flexibility')]))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write(''))
    .pipe(gulp.dest('css'))
    .resume();
});

// Create 'watch' task
gulp.task('watch', function () {
  return gulp
    // Watch the input folder for change,
    // and run `sass` task when something happens
    .watch('scss/**/*.scss', gulp.series('scss'))
    // When there is a change,
    // log a message in the console
    .on('change', function (event) {
      console.log('File ' + event + ' was updated' + ', running tasks...');
    })
  ;
});