Md Mazedul Islam Khan Md Mazedul Islam Khan - 3 months ago 51
PHP Question

Combine Sass and plain CSS into one file with Laravel Elixir

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

Answer

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.

Comments