mercredi 7 février 2018

Laravel 5.5 Webpack autoprefixer configuration

I'm using laravel 5.5 and pretty default webpack.mix.js configuration:

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')

I have app.scss file that includes _common.scss file with

.p2-gradient-bg {
    background-image: -webkit-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%); 
    background-image: -moz-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    background-image: -ms-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
}

I'm compiling this running npm watch and everything works fine, except that when I'm looking a this piece of code in my browser, something deletes first two rules and I can see only: background-image: -ms-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%); I've found that it's always the last rule that has some prefixes... but not always. I'm not sure what's the rule.

Let me show you some examples

//_common.scss
.p2-gradient-bg {
    background-image: -ms-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    background-image: -webkit-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    background-image: -moz-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);

}

//browser
.p2-gradient-bg {
    background-image: -moz-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
}

Next:

//_common.scss
.p2-gradient-bg {
    background-image: -moz-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    background-image: -ms-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    background-image: -webkit-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    margin-left: 0px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

//browser
.p2-gradient-bg {
    background-image: -webkit-linear-gradient( 135deg, rgb(160,208,94) 0%, rgb(65,177,83) 100%);
    margin-left: 0px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

I've tried to disable autoprefixer (which should by turned on by default in laravel, but it looks like it doesn't work, or maybe it doesnt work in included files?) but nothing helps.

I've also found that laravel uses clean-code and I've tried to disable it but nothing changed.

Do you have any idea how to fix that? I don't want to delete rules with prefixes.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire