Level 7
?
Why respond if your only posting gibberish?
Jan 31, 2017
11
Level 7
Laravel Mix and Autoprefixer
Only posting here in the Elixir channel because there is not a Mix channel.... In either case, I am wondering if Laravel Mix is running through autoprefixer like Laravel Elixir was? I was able to modify the autoprefixer settings in Elixir by adding a configuration change in my gulpfile. I don't see anything in the Laravel Mix repo. I don't know much about webpack so hoping someone can answer this question. Thanks in advance!
Level 53
Yes, Mix uses autoprefixer. I ran this code through:
.sample {
display: flex;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
here are the results taken from my app.css:
.sample {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-linear-gradient(top, white, black);
background: linear-gradient(to bottom, white, black);
}
4 likes
Level 12
@ejdelmonico Do we get this behavior from Mix out the box or there's an extra configuration. If so, can you show how.
Level 53
Out of the box you get autoprefixer pulled in through Line 298 in webpack.config.js
2 likes
Level 7
@aviattor looks like it only works when your running it through production script.
npm run production
npm run dev does not run it through autoprefixer
Level 53
Level 7
new webpack.LoaderOptionsPlugin({
minimize: Mix.inProduction,
options: {
postcss: [
require('autoprefixer')
],
context: __dirname,
output: { path: './' }
}
})
I assumed Mix.inProduction was referencing only in production
Level 53
Nah, if you just simply put that sample code at the end of you app.scss and run "npm run dev", you open up public/css/app.css and see the code prefixed. Just a simple test so you can see how it works. Line 100 in the default webpack.config.js uses it through postcss when processing.
Level 7
Hmm. I'm looking through node_modules/laravel-mix/setup/webpack.config.js and there's no mention of Autoprefixer? Am I missing something? :-/
Level 6
@JohnnyW2001 if you look at line 360 of the default webpack.config.js it loads a variable "Mix.options.postCss" which is stored in the Options.js. The value of that is: postCss: [ require('autoprefixer') ],
I hope that helps. :-)
BTW - I found this post super helpful.
3 likes
Level 7
Ah, thank you!!
1 like
Please or to participate in this conversation.