Concatenate multiple sass / css files in a single final css

I’m using laravel 5.4, which by default brings a webpack.mix.js file which will be the files to be concatenated and their destination.

My problem is concatenating scss files with css , what I have in webpack.mix.js is:

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

mix.autoload({});
mix.scripts([
        'assets/js/jquery.min.js',
        'assets/js/custom.js'
    ], 'public/js/app.js')
    .sass([
        'assets/css/app.css',
        'assets/css/app.scss'
    ], 'public/css/app.css');

When I run npm run production or npm run dev the following error occurs:

  

AssertionError: mix.sass () is missing required parameter 1: src

If you already have webpack.mix.js with .css([... instead of .sass([... it ignores the contents of the assets/css/app.scss file and puts in the destination file only the contents of assets/css/app.css

Instead of concatenating using webpack.mix.js , you could do so, in your assets/css/app.scss file:

@import "app.css" // supondo que o arquivo app.css está no mesmo nível que app.scss
@import "foo/bar" // vai incluir um arquivo bar.scss que está dentro do diretório foo...

// restante do scss...

In this way your webpack.mix.js will continue as default:

// código existente omitido...

mix.sass('resources/assets/sass/app.scss', 'public/css');