Purgecss
  • Introduction
  • Configuration
  • CLI
  • JavaScript API
  • With Webpack
  • With PostCSS
  • With Gulp
  • With Grunt
  • With Rollup
  • Whitelisting
  • Extractors
  • Comparison
  • Guides
    • React
    • Vue
    • Next
    • Nuxt
    • Wordpress
Powered by GitBook
On this page
  • Example
  • Created with create-react-app
  • Method 1 - Use craco
  • Method 2 - Run PurgeCSS CLI in postbuild
  • Method 3 - eject create-react-app
  • Results
  1. Guides

React

PreviousGuidesNextVue

Last updated 5 years ago

Example

You can see an example .

Created with create-react-app

This example shows how to set up PurgeCSS with create-react-app template.

Method 1 - Use craco

Custom PostCSS plugins (including PurgeCSS) can be added to Create React App apps using . Follow the , then install the PurgeCSS PostCSS plugin and add it to the craco config:

npm i --save-dev @fullhuman/postcss-purgecss
// craco.config.js
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  style: {
    postcss: {
      plugins: [
        purgecss({
          content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.ts'],
        }),
      ],
    },
  },
};

Method 2 - Run PurgeCSS CLI in postbuild

Add the following code in package.json

"scripts": {
  "postbuild": "purgecss --css build/static/css/*.css --content build/static/index.html build/static/js/*.js --out build/static/css"
},

Method 3 - eject create-react-app

Install the webpack plugin for PurgeCSS:

npm i --save-dev glob-all purgecss-webpack-plugin

Now, modify the file config/webpack.prod.conf.js by adding the following code with the rest of the imports:

// import PurgeCSS webpack plugin and glob-all
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')

...and directly before new ManifestPlugin(...) in the plugins list, add this:

    // Remove unused css with PurgeCSS. See https://github.com/FullHuman/purgecss
    // for more information about PurgeCSS.
    // Specify the path of the html files and source files
    new PurgecssPlugin({
      paths: [paths.appHtml, ...glob.sync(`${paths.appSrc}/*`)]
    }),

Results

This example is importing the bootstrap css framework. Without PurgeCSS, the base css file size is 138 kB. Using PurgeCSS, the base css file size is 4 kB

You need to in order to expose the webpack configuration offered by original create-react-app

here
craco
craco installation instructions
eject