This is a really, really weird one and I'm hoping someone can help me solve what's happening.

Today I noticed on my live server that the CSS wasn't working quite right. Upon further investigation, I saw that the CSS file had my less files out of order. Odd, because my staging environment is fine. The only difference is that in my deploy script for the production server I have

gulp --production

and on my staging I just use

gulp

I ran gulp on my production server without the production flag, and the CSS resolved itself. The really odd thing though is that on my staging server I ran gulp with the production flag and the CSS was still in the correct order.

Here is my less file:

@import "bootstrap/variables.less";
@import "bootstrap/reset.less";
@import "email/wrapper.less";
@import "email/table.less";

and my elixir command:

elixir(function (mix) {
    mix.less('app.less');
    mix.less('pdf.less');
    mix.less('email.less');
    mix.scriptsIn('resources/assets/js', 'public/js');
    mix.version([
        'css/app.css',
        'js/all.js',
        'css/email.css'
    ]);
});

The offending css file is the email.css file. What is happening on my production server is that the wrapper.less i being placed before the reset.less (which of course causes all of the wrapper.less commands to get overwritten).

I ran

npm update

on both servers just to make sure they are using the same versions of everything, but I'm still getting the correct behavior on my staging server but not on my production server.

Any thoughts?