Laravel mix: Compiling all scss files in one line

Question

I've been working on a laravel project and I've had many.scss files in my resource folder. So usually I would just write them like this

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/file1.scss', 'public/css')
    .sass('resources/sass/file2.scss', 'public/css')
    .sass('resources/sass/file3.scss', 'public/css')
    .sass('resources/sass/file4.scss', 'public/css')
    .sass('resources/sass/file5.scss', 'public/css')
    .sass('resources/sass/file6.scss', 'public/css')
    .sass('resources/sass/file7.scss', 'public/css')
    .sass('resources/sass/file8.scss', 'public/css')
    .sass('resources/sass/file9.scss', 'public/css')
    .sass('resources/sass/file10.scss', 'public/css')
    .sourceMaps();

is there some way to shorten this so instead of coding.sass(source,destination), write it in like an array of source then the destination? Without merging all files into one css, because of course, each sass file has its own page it is used for. like.sass([array_source], destination)?

Answer 1

2 ways:

1st way:

Make a file called app.scss and inside of this @import "file.scss" include all files.

then .sass('resources/sass/app.scss', 'public/css') This will however make all files a single file. This may not be what you are after.

2nd way:

const fs = require("fs");

fs.readdirSync("resources/scss/").forEach(fileName => 
    mix.scss(`resources/scss/${fileName}`, "public/css"));

This will keep them all in single files.