CODEWITHSUNDEEP
csslaravelsasslaravel-mix
sushant
sushant

Reputation: 87

after compiling sass using laravel mix only webkit is shown

I've used the following scss code for mixin but after compilation -moz- and -o- vendor prefixes are not shown in compiled css file. 

@mixin transition($move) {

     -webkit-transition: $move;
      -moz-transition: $move;
      -o-transition: $move;
      transition: $move;
    }

    a {
      &:hover, &:focus {
        color: $brand-color;
      }
      @include transition(all 0.2s linear);
    }

after compiling using mix :

a {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

a:hover,
a:focus {
  color: #4676fa;
}

Thanks in advance. :)

Upvotes: 3

Views: 1603

Answers (1)

Zayn Ali
Zayn Ali

Reputation: 4915

This is because laravel uses autoprefixer to add/remove vendor prefixes based on the browser version limit. Almost every browser now supports transition.

You can see transition support here.

So, removing useless code reduces the bundle size.

And if you really want to support older browsers then set this configuration.

For Laravel Mix (Latest)

Add this code on top of your webpack.mix.js.

let mix = require('laravel-mix');

mix.options({
    postCss: [
        require('autoprefixer')({
            browsers: ['last 40 versions'],
        })
    ]
});

...
...

For Laravel Elixir

Add this code on top of your gulpfile.js

var elixir = require('laravel-elixir');

elixir.config.css.autoprefix.options.browsers = ['last 40 versions'];

...
...

Upvotes: 3

Related Questions