How to change autoprefixer options

sage
,
1

Hi all,

I’m having some styling issues with some old versions of Safari I’d like to try and address.
I’m hoping it can be easily sorted with changing the Autoprefixer options, but I’m unsure how to do it.

What I’ve tried:
Changing this in my package.json doesn’t change anything.

“browserslist”: [
“last 2 versions”,
“android 4”,
“opera 12”
],

Autoprefixer is working by default and I can disable it within postcss.config.js.
But that’s the only way I can see it making a change.

What am I missing?
Any help would be much appreciated.

Cheers,

Paul

2

Hey @pmang,

That should be the correct way to modify what browsers you are targeting with autoprefixer (and any other tool using the browserslist option).

A couple of questions:

  1. What did you change browserslist to?
  2. Can you share the CSS that should be prefixed to fix the Safari problem but isn’t?
3

Hi @mmirus,

Thank you for the reply, and sorry for my slow reply, I had to do more tests before I got back to you.
I solved the problem and turns out this was my mistake (somewhat) afterall.

I was changing the config within package.json, however, since no real change was made to the scss it wouldn’t regenerate new css files simply based off a change to package.json. So every time I made a change to .json I randomly updated my scss with something just to force a change. It seems like this is something that should be resolved in the build.

If you were interested, I was requiring some extra -webkit flexbox classes so it would work in Safari 6, turns out I had to go way back 10 versions thanks to referencing:
http://browserl.ist/?q=last+10+versions

Cheers,

Paul

1 Like