DEV Community

Cover image for Add PostCSS to Create-React-App

Add PostCSS to Create-React-App

Darkø Tasevski on June 23, 2018

Without ejecting! A small introduction to PostCSS Many of you are spending your time working with CSS, so I guess you are familiar wi...
Collapse
 
jonathantneal profile image
Jonathan Neal

Take a look at Rewire. It lets you extend Create React App without ejecting. There is a plugin for PostCSS, too. Let me know what you think.

github.com/csstools/react-app-rewi...

Collapse
 
puritanic profile image
Darkø Tasevski

Looks interesting, going to take it for a spin in my next project. Thanks :D

Collapse
 
cl3m3cy profile image
iHmD

Good stuff!
thanks man!

Collapse
 
z2lai profile image
z2lai

Nice solution, thanks for writing this! I'd suggest adding some explanations of what the new scripts in package.json do as that looks like the most important part of getting PostCSS to work with React. Also, adding a heading or intro for the "Now let's do something more advanced" part would make the purpose of that section clearer for beginners like myself.

Collapse
 
avikaminetzky profile image
Avi Kaminetzky

Apparently CRA 2.0 has PostCSS included (as well as CSS modules). twitter.com/timer150/status/104527...

Collapse
 
puritanic profile image
Darkø Tasevski

Only Autoprefixer as far as I know, and that's what this tweet says. You can't add custom plugins to PostCSS in CRA currently, not sure about version 2.

Collapse
 
avikaminetzky profile image
Avi Kaminetzky

Yes.
I'm curious popular/useful custom plugins you've come across.

Collapse
 
karlkras profile image
Karl Krasnowsky

So would I configure this so the transpiler would find any file with the, e.g., extension *.pcss anywhere under my ./src location in my project?

Collapse
 
puritanic profile image
Darkø Tasevski

This postcss-cli config is watching only one file for changes, main.css in styles/ folder. All the other files are imported inside that file, so it's basically watching all imported files.

If you want to watch the whole dir, you can do it too, but you need to change script command a bit, there are a few examples how to do that in the main postcss-cli repository.

About extension, simple .css will work fine, as far as I know, there is no official extension for postcss files, and community recommends using just plain old .css.

Collapse
 
karlkras profile image
Karl Krasnowsky • Edited

Well I'm looking into incorporating a large, existing library that is using the pcss exension exclusively, I was hoping to use it as is without renaming the entire code base.

Collapse
 
basehq profile image
BaseHQ

Does this work with create-react-app v3?
it doesn't seem to process anything for me.

Collapse
 
puritanic profile image
Darkø Tasevski

Sorry for the late reply, I haven't tried this with the new CRA but it should work without the problems.