title: Use autoprefixer with angular11
body: <p>I am using angular11 with <code>SCSS</code>. I have the following class for example:</p>
  <pre><code>.freeSpace {
      flex: 1;
      display: flex;
      align-items: flex-end;
      width: 100%;
      max-width: 600px;
  }
  </code></pre>
  <p>But, when I do <code>ng build --prod</code> it does not turn to:</p>
  <pre><code>.freeSpace {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      width: 100%;
      max-width: 600px;
  }
  </code></pre>
  <p>How can I force angular to use autoprefixer?</p>
  <p>My <code>angular.json</code> file:</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;we19-app&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;,
            &quot;skipTests&quot;: true
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;outputPath&quot;: &quot;../backend/angular&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;aot&quot;: true,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;optimization&quot;: true,
                &quot;outputHashing&quot;: &quot;all&quot;,
                &quot;sourceMap&quot;: false,
                &quot;namedChunks&quot;: false,
                &quot;extractLicenses&quot;: true,
                &quot;vendorChunk&quot;: false,
                &quot;buildOptimizer&quot;: true,
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;2mb&quot;,
                    &quot;maximumError&quot;: &quot;5mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;6kb&quot;,
                    &quot;maximumError&quot;: &quot;10kb&quot;
                  }
                ]
              }
            }
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;we19-app:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;we19-app:build:production&quot;
              }
            }
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;we19-app:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            }
          },
          &quot;lint&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
            &quot;options&quot;: {
              &quot;tsConfig&quot;: [
                &quot;tsconfig.app.json&quot;,
                &quot;tsconfig.spec.json&quot;,
                &quot;e2e/tsconfig.json&quot;
              ],
              &quot;exclude&quot;: [
                &quot;**/node_modules/**&quot;
              ]
            }
          },
          &quot;e2e&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
            &quot;options&quot;: {
              &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
              &quot;devServerTarget&quot;: &quot;we19-app:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;we19-app:serve:production&quot;
              }
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;we19-app&quot;
  }
  </code></pre>
  <p>I want my final <code>scss</code> files to look like the prefixer.
  when I open my app in the browser, the &quot;regular&quot; (non-converted to autoprefixer code) scss code is presented.</p>
  <p><strong>Also, when I manually attach the following to my scss:</strong></p>
  <pre><code>.freeSpace {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      width: 100%;
      max-width: 600px;
  }
  </code></pre>
  <p>When I do <code>ng build --prod</code> and view the app in my browser, all these &quot;extra&quot; scss (such as <code>display: -ms-flexbox</code>) are omitted</p>
  <p>My .browserslistrc:</p>
  <pre><code># This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
  # For additional information regarding the format and rule options, please see:
  # https://github.com/browserslist/browserslist#queries
  
  # For the full list of supported browsers by the Angular framework, please see:
  # https://angular.io/guide/browser-support
  
  # You can see what browsers were selected by your queries by running:
  #   npx browserslist
  
  last 1 Chrome version
  last 1 Firefox version
  last 2 Edge major versions
  last 2 Safari major versions
  last 2 iOS major versions
  Firefox ESR
  not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
  </code></pre>