Gulp function to compile scss files to individual css files.md

Here's a gulp function that hops through the directory structure and compiles css files in the same directory as the corresponding scss file. It’s as simple as our current gulp routine, so we don’t have to abandon scss to use Single Directory Components unless we want to for other reasons

/* This will compile individual css files in the same directory as the corresponding scss file */
function sdcscss() {
  return gulp
    .src("./assets/styles/**/*.scss", {
      base: "./assets/styles/",
    })
    .pipe(sassGlob({}))
    .pipe(sourcemaps.init())
    .pipe(sass({}).on("error", sass.logError))
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("./assets/styles/"));
}

We just have to be aware that any scss files whose names start with an underscore won’t be included, so underscores are only for files we’re globbing in inside an scss file. (edited)

megclaypool/Gulp function to compile scss files to individual css files.md