Adding Post CSS support

PostCSS logo

Learn about PostCSS here.

1. Add PostCSS packages.

You'll need to add 2 packages to get started:

npm i postcss-each
npm i postcss-loader

2. Add PostCSS to your build process.

Open client/

Within the plugins section add a new rule to the rules array using push.


plugins: [
cfg => {
// inject postcss-loader for .css files
// the same can be done for scss or css modules
test: /\.css$/,
use: [
loader: 'postcss-loader',
options: {
plugins: [
return cfg;

You'll need to completely restart your app to see changes in the build process.

cmd + c
yarn start
  1. Add your CSS


.box-wrap {
padding: 50px;
display: flex;
@each $color in red, green, blue {
.box-$(color) {
width: 100px;
height: 100px;
margin: 10px;
display: block;
background: $(color);


import '../poststyles.css'
<Box className="box-wrap">
<p>Three box styles generated by PostCSS:</p>
<Box className="box-red"/>
<Box className="box-green"/>
<Box className="box-blue"/>

4. Finished

And your done :-)

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here