Multiple SCSS compiling with Gulp

Question

I'm trying to adapt a configuration Gulpfile to compile SCSS files by generating multiple bundled files relating to their directories. What I've as entry is something like:

scss/
   folder-1/
       file1.scss
       file2.scss
       ...
   folder-2/
       file1.scss
       file2.scss
       ...
   ...

And what I'm expecting to have as output is:

css/
   folder1.bundle.css // Containing only all files inside folder 1
   folder2.bundle.css // Containing only all files inside folder 2

Do I need to run multiple times the Gulp-Sass task with different configurations or there is a better way to do that?

I already tested doing something like:

gulp.task('sass', () => {
    let tasks = sassConfig.map(config => {
        return gulp.src(config.sass.src)
            .pipe(sass().on('error', sass.logError))
            .pipe(rename(config.buildLocations.filename))
            .pipe(gulp.dest(config.buildLocations.css))
            .pipe(browserSync.reload({ stream: true }));
    });

    return merge(tasks);
});

And having my configuration array as this:

const sassConfig = [
    global: {
        // Global styles configuration
        sass: {
            src: ['./scss/style.scss']
        },
        buildLocations: {
            css: './css/',
            filename: 'commons.bundle.css'
        }
    },
    pdp: {
        sass: {
            src: ['./scss/pdp/_pdp.scss']
        },
        buildLocations: {
            css: './css/pdp/',
            filename: 'pdp.bundle.css'
        }
    },
    plp: {
        sass: {
            src: ['./scss/plp/_plp.scss']
        },
        buildLocations: {
            css: './css/plp/',
            filename: 'plp.bundle.css'
        }
    },
    blog: {
        sass: {
            src: ['./scss/blog/_blog.scss']
        },
        buildLocations: {
            css: './css/blog/',
            filename: 'blog.bundle.css'
        }
    }
];

When I run the task only got the first file compiled (commons.bundle.css) but not the rest... Something wrong on the code above?

Also if I try to change the order of the sassConfig array items it still keeps compiling the commons.bundle.css so I guess It's not compiling the first element of the array necessarely...

=====================================

SOLUTION: I've found the error, is caused by the underscores at the begining of each file. That's why also the 'styles.scss' was the only file compiling. After removing all underscores from the filenames they've been compiled!

Multiple SCSS compiling with Gulp

0 Answers