Concatenate multiple sass / css files in a single final css

Posted on

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 their destination.

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

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

    ], 'public/js/app.js')
    ], '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


Answer :

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');


Leave a Reply

Your email address will not be published. Required fields are marked *