Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Laravel Autoprefixer not working within webpack

My style.css don't have css-prefix, when I run command npm run production. I'm using:

Laravel: 5.6.39 & Laravel-mix: 4.1.2

File webpack.mix.js:

mix.sass('resources/assets/sass/style.scss', 'public/css').options({
    postCss: [
       require('autoprefixer')({
          browsers: ['last 40 versions'],
             grid: true
          })
    ]
});

File style.scss

img {
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

Output file style.css:

img{
   transform: translate(-50%,-50%)
}

How to add css-prefix to output file style.css?

like image 885
Omega P Avatar asked Aug 07 '19 16:08

Omega P


1 Answers

I was fixed it. Just move origin transform before prefix.

img {
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

change to:

img {
    transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);   
}

and it work!

like image 136
Omega P Avatar answered Nov 11 '22 02:11

Omega P