How do I use postcss/autoprefixer in angular

Question

I have read through the issue #1521

on how to use postcss/autoprefixer I am still really unclear.

Do I just npm install autoprefixer --save-dev? Is this the right way of doing it?

I have also read the postcss/autoprefixer docs I still do not understand how to go about doing it

Please assist, thanks

Update Using with SCSS, the script runs

postcss --parser postcss-scss -u autoprefixer --autoprefixer.browsers \"last 2 versions\" -r src/**/*.scss

Answer 1

I have installed the *postcss postcss-cli autoprefixer as dev dependencies

npm install --save-dev postcss postcss-cli autoprefixer

And then create a npm script inside the package.json file to run the postcss cli and auto prefixer like so

"script": {
  ...
   "prefixcss": "postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -r src/**/*.css",
  ...
}

And then ran the script before I rebuilt

 npm run prefixcss

Answer 2

AFAIK starting Angular v11.2, PostCSS is already added to the angular cli. auto-prefixer is also enabled out of the box.

If you want to configure the PostCSS, just create a postcss.config.js file.