sass - Gulpfile: How to compile each SCSS into separate CSS with same name but with additional common styles

Question

First of all I'd like you guys to be gentle. I haven't been coding much in recent year and since gulp update when then changed syntax to writing functions and exporting I somehow made it work then and left with no changes up to this point, no clue if they changed something else. I've been happy with what it is right now, but I have no idea how to make it work the other way.

So anyway I'm working on a project right now, where there will be many htmls, and each one will have quite different styles, but some will be common. I want to make a main.scss file with common styles for each html, but I want to make a separate scss with styles specific to each html. This way in the end I want to have a separate css file made from a specific scss with same name combined with main.scss, so that it won't have to download a single large file, but only styles I need.

Example:

main.scss
01.scss
02.scss
03.scss

will compile to:

01.css ( main.scss + 01.scss )
02.css ( main.scss + 02.scss )
03.css ( main.scss + 03.scss )

This is my gulpfile right now:

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

function style() {
  return gulp.src('./scss/**/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./css'))
   .pipe(browserSync.stream());
}

function watch() {
  browserSync.init({
    server: {
      baseDir: './'
    }
  });
  gulp.watch('./scss/**/*.scss', style);
  gulp.watch('./*.html').on('change', browserSync.reload);
  gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

If you have an idea how to do it in a better way I would really appreciate it.

question from:https://stackoverflow.com/questions/65870893/gulpfile-how-to-compile-each-scss-into-separate-css-with-same-name-but-with-add

Answer 1

I think you will have to import your main.scss into each of your other files and exclude main.scss from your gulp.src.

function style() {
  return gulp.src(['./scss/**/*.scss', '!./scss/**/main.scss'])

  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./css'))
  .pipe(browserSync.stream());
}

'!./scss/**/main.scss' this negates or excludes that file from being passes into this task - I assumed main.scss was in the same folder as your other scss files, if that is not the case you will have to modify the path.

Then @import main.scss into each of your 01.scss, 02.scss, etc. files:

@import "main.scss"; // also assumes in same folder

You can put this import statement anywhere in the file, if it is first any of main.scss styles will be overridden by conflicting styles in the rest of the 0x.scss file. If you put the import statement at the end, then main.scss styles will override any previous conflicting styles.

---

Note: you should really be using @use instead of @import and gulp-dart-sass instead of gulp-sass at this point. See sass @use rule.

// in your gulpfile.js const sass = require('gulp-dart-sass'); // once installed

@use "main.scss"; // must be at top of each scss file, such as 01.scss