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/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
yarn start
  1. 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 :-)

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 slack.deity.io.