gulp not compiling scss in subfolders - html

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.

Answer 1

Have you tried gulp-sass-glob?
https://www.npmjs.com/package/gulp-sass-glob