gulp not compiling scss in subfolders

Question

I have the following folder structure:

theme
  assets
    build
      css
        style.css
    src
      theme 
        buttons.scss
      style.scss
  components
    hero
      hero.html
      hero.scss
  index.html

Any changes in src theme and any scss file for a component (i.e. hero.scss) should all compile into style.css.

My theme files compile correctly, but my component scss files don't appear in style.css.

Instead, when I run gulp css, a separate css file appears under the build folder, i.e.

build
  css
    style.css
    hero.css

How can I get it to compile everything into style.css?

gulpfile.js

const assetsSRC     = 'assets/src/',
      assetsDST     = 'assets/build/',
      components    = 'components/';

const gulp          = require('gulp'),
      sass          = require('gulp-sass')(require('sass')),
      sourcemaps    = require('gulp-sourcemaps'),
      fs            = require('fs'),
      path          = require('path'),
      merge         = require('merge-stream'),
      postcss       = require('gulp-postcss'),
      autoprefixer  = require('gulp-autoprefixer'),
      plumber       = require('gulp-plumber'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      strip         = require('gulp-strip-comments');

const componentCSS    = components + '**/*.scss',
      componentJS     = components + '**/*.js',
      globalCSS       = assetsSRC + 'scss/style.scss';
      configCSS       = assetsSRC + 'scss/config/**.scss';
      themeCSS        = assetsSRC + 'scss/theme/**.scss';
      globalJS        = assetsSRC + 'js/*.js';
      libJS           = assetsSRC + 'js/lib/*.js';

var sassOptions = {
  errLogToConsole: true,
  outputStyle: 'compressed'
};

function getFolders(dir) {
  return fs.readdirSync(dir).filter(function(file) {
    return fs.statSync(path.join(dir, file)).isDirectory();
  });
}


function css() {
  var folders = getFolders(components);
  var tasks = folders.map(function(folder) {
    var src = path.join(components, folder);
    var dst = path.join(assetsDST + 'css');
    return gulp.src(path.join(src, '/**/*.scss'))
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 2 versions'))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(dst));
  });
  return merge(tasks);
}


function mainCSS() {
  var dst = path.join(assetsDST + 'css/');
  return gulp.src(globalCSS, { allowEmpty: true })
  .pipe(sourcemaps.init())
  .pipe(sass(sassOptions).on('error', sass.logError))
  .pipe(autoprefixer('last 2 versions'))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest(dst));
}


function libraryJS() {
  var dst = path.join(assetsDST + 'JS/lib');
  return gulp.src(libJS).pipe(gulp.dest(dst));
}


function watch() {
  gulp.watch([globalCSS,configCSS,themeCSS, componentCSS],mainCSS);
}


exports.mainCSS = mainCSS;
exports.mainJS = mainJS;
exports.libraryJS = libraryJS;
exports.css = css;
exports.javascript = javascript;
exports.watch = watch;

const build = gulp.series(watch);
gulp.task('default', build);

Edit

Attempt using gulp-sass-glob:

function css() {
  gulp.task('styles', function () {
    var src = path(components);
    return gulp
      .src(src, '/**/*.scss')
      .pipe(sassGlob())
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 2 versions'))
      .pipe(sourcemaps.write('.'))
      .pipe(sass())
      .pipe(gulp.dest(assetsDST + 'css'));
  });
}

Re-ran gulp watch (no errors). Made a change and saved hero.scss. Then went into style.css to find css that has been compiled from hero.scss - nothing shows. scss not compiled into style.css

Edit 2

I have the following:

function css() {
  var folders = getFolders(components);
  var tasks = folders.map(function(folder) {
    var src = path.join(components, folder);
    var dst = path.join(assetsDST + 'css/');
    return gulp.src(path.join(src, '**/*.scss'))
      .pipe(sourcemaps.init())
      .pipe(sass(sassOptions).on('error', sass.logError))
      .pipe(autoprefixer('last 2 versions'))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(dst));
  });
  return merge(tasks);
}

This is creating individual css files (rather than collating into style.css). I think this one is close, but unsure how to proceed.

score 0 · Answer 1 · answered May 23 '22 at 13:16

0

Have you tried gulp-sass-glob?

https://www.npmjs.com/package/gulp-sass-glob

answered May 23 '22 at 13:16

Honsa Stunna

577
2
8
24

I've just tried it, no luck - have updated question to showcase demo. – Freddy May 23 '22 at 13:24
What's in your src variable? This should contain the SASS source according to the docs https://gulpjs.com/docs/en/api/src/ – Honsa Stunna May 23 '22 at 13:40
My bad, forgot to add in the `src`, but it's essentially just the `components` folder (`var src = path(components);`) - Have updated my edit to add in the snippet – Freddy May 23 '22 at 13:47
SRC should just be your main SASS file path, from there you import your components via SASS – Honsa Stunna May 23 '22 at 13:52
You're saying to import `hero.scss` into `stye.scss`? If so, I'm looking to keep the `scss` files under the `component` folder, in order to keep things manageable. Let me know if I'm misinterpreting – Freddy May 23 '22 at 14:08

gulp not compiling scss in subfolders

Edit

Edit 2

1 Answers1