javascript – Concatenate multiple sass/css files into one final css

Question:

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

My problem is to concatenate 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 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 the assets/css/app.css

Answer:

Instead of concatenating using webpack.mix.js , you could do it like this, in your 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...

This way your webpack.mix.js remain as default:

// código existente omitido...

mix.sass('resources/assets/sass/app.scss', 'public/css');
Scroll to Top
AllEscort