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

izupet · Accepted Answer · 2015-12-12 22:17:41Z

21

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.

edited Dec 12, 2015 at 22:17

answered Dec 12, 2015 at 17:13

izupet

1,5575 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Omid Over a year ago

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.

Ahmed Shefeer Over a year ago

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

Patrick.SE · Accepted Answer · 2016-08-10 21:56:19Z

1

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.

answered Aug 10, 2016 at 21:56

Patrick.SE

4,5945 gold badges37 silver badges44 bronze badges

2 Comments

Matt K Over a year ago

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

Michael Over a year ago

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

Collectives™ on Stack Overflow

Combine Sass and plain CSS into one file with Laravel Elixir

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related