Concatenate multiple Sass/css files into one final css

Question

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

My problem is concatenating files scss 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 the webpack.mix.js with .css([... instead of .sass([... it ignores the contents of the file assets/css/app.scss and puts only the contents of assets/css/app.css

Answer 1

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

@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...

Thus its webpack.mix.js will remain as default:

// código existente omitido...

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