PostCSS

All kinds of stylesheets, regardless of the extensions, will be processed by PostCSS at the end.

When a stylesheet is being processed, Saber will use the nearest postcss.config.js or .postcssrc.js etc.

For example you can add Autoprefixer in postcss.config.js to automatically add vendor prefixes based on the browsers you target:

yarn add autoprefixer --dev

Add this plugin in PostCSS config file:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

Configure the browsers you wanna support in package.json:

{
  "browserslist": ["ie > 8", "last 2 versions"]
}

Then such CSS:

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Will become:

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
Last Edited on April 10, 2019 Edit This Page on GitHub