11

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'
        ]);
})
Md Mazedul Islam Khan
  • 5,318
  • 4
  • 40
  • 66

2 Answers2

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.

izupet
  • 1,529
  • 5
  • 20
  • 42
  • 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. – Omid Jan 27 '17 at 14:05
  • Hi, how to do this if one of your css is inside the node_modules folder? What is the path to be given? – Ahmed Shefeer Jun 06 '18 at 08:17
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.

Patrick.SE
  • 4,444
  • 5
  • 34
  • 44