2 September 2020
How to add autoprefixer to an Elixir Project (with webpack)
by Katie Pohlman
As a whole, we’re really beginning to see Phoenix and Elixir gain some serious traction in the market. An increasing number of our projects are utilizing all that it has to offer—it’s really cool to see new technologies begin to take hold and stand on their own, and to be part of solidifying their presence.
The tricky part about witnessing and experiencing this phase of a technology’s lifespan, though, is that there are not a lot of resources available outside of its official documentation, and oftentimes only in the source code itself.. Especially for a designer, like me, who admittedly is more comfortable on the HTML/CSS side of things and is always searching for tips and tricks on how to make things happen or set things up. Specifically setting up autoprefixer.
If you’re a front-end developer and are unfamiliar with autoprefixer, I’m about to introduce you to a game-changer. Autoprefixer is a package you can include in your codebase that will automatically prefix your CSS for full browser support. You can config which browsers you want to support, write the base styles and it will add the prefixes when the code is compiled to ensure those styles work across platforms—it’s a beautiful, beautiful thing.
So, you can imagine my dismay when I tried setting it up in my new Elixir project and couldn’t get it to work by simply following the provided documentation. Then a quick Google search led me down several rabbit holes that did not work. So I’m here to consolidate your efforts to hopefully one search. Here’s how we set up autoprefixer in our Elixir project using Webpack.
- In your terminal, change directory (`cd`) into your assets folder.
-
Once in your assets folder, run this command
npm install -D postcss-loader autoprefixer -
And then run this command
npm install style-loader -
Locate your package.json file and open it in your editor of choice. Add
"postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "last 5 version", "not dead", "iOS >= 9" ] -
Locate your webpack.config file and open it in your editor of choice. Add
`'postcss-loader', (between ’css-loader- & ‘sass-loader’)`
That’s it! Restart your server and test that it is working properly by adding a style you know will need prefixed. The easiest one to test with is `appearance`. So add a style to your buttons of `appearance: none;` then open firefox and inspect a button. If you see the following, then you know it’s working!
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
That’s it. A few too many google searches and a lot of trial and error has led to this moment. Hopefully, I’ve saved you a bit of time in your search to install autoprefixer yourself.
