How to change Autoprefixer options in Angular CLI project?

Question

I am trying to use grid css in my Angular2 CLI project, however I get the following message:

autoprefixer: IE supports only grid-row with / and span. You should add grid: false option to Autoprefixer and use some JS grid polyfill for full spec support

I looked at https://github.com/postcss/autoprefixer which explains how to set this option in a gulp file, however I'm not sure where in the Angular project I can configure this.

Answer 1

It is currently not possible to pass options to autoprefixer in angular-cli 1.0 (issue comment).

There are two options to fix the problem.

You can selectively disable prefixing inside for a single rule:

.grid-row {    
  /* autoprefixer: off */
  grid-row-start: 1;
  grid-row-end: 2;
  // ... other IE-incompatible configuration
}

You can also use ng eject (docs) to output the webpack config of your angular application and modify it.