Combine Sass and plain CSS into one file with Laravel Elixir

Question

How do you combine plain CSS and Sass file with Laravel Elixir? If I run the following code then two files "all.css" and "app.css" is generated on the public/CSS/ directory. However, I only want to generate one CSS file which would be all.css. Do you guys know any tricks to do it?

elixir(function (mix) {
    mix.sass([
            'app.scss'
        ])
        .styles([
            'owl.carousel.css'
        ]);
})

Sectarianize

Answer 1

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.

Adeliaadelice

There is a problem with this in debug mode. Because elixir will create sourcemaps, it causes 404 network error for custom.css.map because it doesn't exists in public path. Disabling sourcemaps also prevents you to debug in local environment. I searched for a way to disable sourcemap just for Sass, but had no luck. – Eudemonism

Hi, how to do this if one of your css is inside the node_modules folder? What is the path to be given? – Carrera

Answer 2

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.

Gayomart

This will throw errors complaining about missing the sass src parameter if you try it. Does not work. – Bunco

Works for me mix.sass(['app.scss', 'libs/*.css']); is OK too! – Petrochemistry