Merge SCSS and CSS File into a Single CSS File in Laravel mix

Too many requests can slow down your page load. So, reducing the number of requests decreases latency and speeds up your page load.

Here is an example to combine scss and css file into a single css file in Laravel mix:

webpack.mix.js

const mix = require("laravel-mix");
let productionSourceMaps = false;

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .combine(
        [
            "public/css/app.css",
            "resources/css/custom1.css",
            "resources/css/custom2.css",
            "resources/css/custom3.css",
        ],
        "public/css/all.css"
    )
    .sourceMaps(productionSourceMaps, "source-map");

The .sass("resources/sass/app.scss", "public/css/app.css") line creates a app.css file inside the public/css/ directory which is then combined with other .css files and added to all.css.