CODEWITHSUNDEEP
javascriptlaravelgulpgulp-watchlaravel-elixir
Dastur
Dastur

Reputation: 714

Laravel Elixir Not Combining Stylesheets On Change

Beforehand, I apologise if the title is slightly misleading. I found was finding it very difficult to properly explain my problem in the title. I'll just go ahead and explain my issue.

Here is my gulpfile:

elixir(function(mix) {
    mix.sass([
        'app.scss'
    ], 'public/css/app.css')
    .styles([
        'reset.css',
        'resources/assets/css/bootstrap-responsive/css/bootstrap.css',
        'app.css'
    ], 'public/css/main.css')
    .version([
         'css/main.css'
    ]);
});

My issue is that when I change my app.scss, it only updates the app.css file in the public directory. What I want it to do is after compiling the app.css file, create the main.css file as well by combining the three stylesheets. The problem is I'm not actually changing any of those three stylesheets because gulp is doing the compiling for me.

I'm not exactly sure if there is a way of actually fixing this, but any answers help.

Thanks.

P.S. I do not want to import the other two css files into my scss file instead of combining because it will add more requests when I have to load a page.

Upvotes: 0

Views: 61

Answers (1)

pawelmysior
pawelmysior

Reputation: 3250

Since plain css is also compilable, try this:

elixir(function(mix) {
    mix.sass([
        'reset.css',
        'resources/assets/css/bootstrap-responsive/css/bootstrap.css',
        'app.scss'
    ], 'public/css/main.css')
    .version([
         'css/main.css'
    ]);
});

Or import the other two css files in the app.scss file with @import "path_to_file"; and than just list the app.scss file in the gulpfile.

Upvotes: 1

Related Questions