Gulp编译SASS时意外复制子文件夹问题求助

Hey there! I see the issue you're running into—your current Gulp setup is processing all files and subfolders under scss/, which is why the components/ directory is getting copied over even though you only want to compile theme.scss. Let's fix this quickly.

Why It's Happening #

The glob pattern src/assets/scss/**/* you're using matches every single file and subdirectory inside the scss/ folder. That means Gulp is picking up all files in components/ alongside theme.scss, and since it processes everything in the stream, those extra files are ending up in your css/ output.

The Fix #

Instead of using a broad glob, target theme.scss directly in your gulp.src() call. This way, only your main SCSS file gets processed, and any imported files (like those in components/) will still be handled by the SASS compiler automatically.

Here's your updated gulpfile.js:

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

gulp.task('sass', function() {
  return gulp.src('src/assets/scss/theme.scss') // Directly target your main file
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('src/assets/css'))
});

Key Notes #

• If theme.scss uses @import to pull in files from components/, don't worry—SASS will resolve those dependencies during compilation, you don't need to include them in the Gulp stream.
• This change ensures only theme.css is generated in your css/ folder, and the components/ directory won't be copied over anymore.

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