Combine Sass and plain CSS into one file with Laravel Elixir Combine Sass and plain CSS into one file with Laravel Elixir php php

Combine Sass and plain CSS into one file with Laravel Elixir


I usualy do it this way. Directory structure:

/public    /css         all.css/resources    /css        app.css    /sass        app.scss

The code should look like this:

elixir(function (mix) {    mix.sass([        'app.sass'    ], 'resources/assets/css/custom.css')    .styles([        '/resources/assets/css/app.css',        '/resources/assets/css/custom.css',    ], 'public/css/all.css', __dirname);})

This will first create custom.css file in /resources/assets/css/custom.css and then all css files in this folder will be merged in one file located in /public/css.


Might not be as clean as separating directories, but a SASS file compiles to a CSS file, so in theory you can pass a normal css file into the elixir mixer:

mix.sass(['app.scss', 'jumbotron-narrow.scss', 'datepicker_standalone3.css']);

The end-result is a single app.css file in the corresponding public directory.