Skip to content
Configure PostCSS in Create React App without ejecting
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit d8d4cf6 May 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test-cra1 3.0.1 Oct 9, 2018
test-cra2 3.0.2 Oct 13, 2018
.editorconfig 1.0.0 Jun 5, 2018
.gitignore 2.0.0 Sep 18, 2018
.rollup.js 4.0.0 May 13, 2019
.travis.yml 4.0.0 May 13, 2019
CHANGELOG.md 4.0.0 May 13, 2019
CONTRIBUTING.md 1.0.1 Jun 5, 2018
LICENSE.md 1.0.0 Jun 5, 2018
README.md 3.0.2 Oct 13, 2018
index.js 3.0.2 Oct 13, 2018
package.json 4.0.0 May 13, 2019

README.md

React App Rewire PostCSS PostCSS Logo

NPM Version Build Status Support Chat

React App Rewire PostCSS lets you configure PostCSS in Create React App v1 and v2 without ejecting.

Usage

Add React App Rewire PostCSS to your Rewired React app:

npm install react-app-rewire-postcss --save-dev

Next, add React App Rewire PostCSS to config-overrides.js in your React app directory:

module.exports = config => {
  require('react-app-rewire-postcss')(config/*, options */);

  return config;
};

That’s it! Now you can control PostCSS with all the configuration options from PostCSS Loader:

module.exports = config => {
  require('react-app-rewire-postcss')(config, {
     plugins: loader => [
      require('postcss-preset-env')()
    ]
  });

  return config;
};

Alternatively, you can now use postcss.config.js in your React app directory:

module.exports = config => {
  require('react-app-rewire-postcss')(config, true /* any truthy value will do */);

  return config;
};
module.exports = {
  plugins: {
    'postcss-preset-env': {
      stage: 0
    }
  }
};

And you can leverage Browserslist by adding a .browserslistrc to your React app directory:

# browsers we support

> 2%
not dead

Happy PostCSS’ing!

You can’t perform that action at this time.