Skip to main content

Adding Post CSS support

PostCSS logo

Learn about PostCSS here.

1. Add PostCSS packages.​

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

postcss-each
npm i postcss-each
postcss-loader
npm i postcss-loader

2. Add PostCSS to your build process.​

Open client/falcon-client.build.config.js.

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

client/falcon-client.build.config.js

plugins: [
  cfg => {
    // inject postcss-loader for .css files
    // the same can be done for scss or css modules
    cfg.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            plugins: [require('postcss-each')]
          }
        }
      ]
    });
    return cfg;
  }
];

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

cmd + c (or ctrl + c)
yarn start

3. Add your CSS​

client/src/poststyles.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);
  }
}

client/src/components/YourComponent.js

...
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"/>
</Box>

4. Finished​

And your done :-)