Facebook’s Create React App is a great way to get started on a new React project quickly. It supports a lot of sensible and popular defaults. But if you want to add unsupported functionality — a CSS preprocessor step like CSS Modules for example—you’re going to have to eject and head out on your own.

This article will explain how to use CSS Modules in a Create React App … app.

Starting a new project with Create React App (I’m just going to call it CRA for short) means you no longer have to manage a bunch of node modules and confusing Webpack configs. After installing CRA globally ($ yarn global add create-react-app) starting a new project is as easy as:

$ create-react-app myApp$ cd myApp/$ yarn start

A nice detail is that CRA keeps itself updated so you shouldn’t ever need to manually update the global create-react-app package.

Go your own way

You get a lot of power from those little commands. Unfortunately, if you want to do anything outside of what CRA provides you’ll have to go your own way.

the `eject` command ⏏

Create React App comes with a handy little command for those of us that have our own opinions about the ingredients of a great React setup: the eject command:

$ yarn eject

The Create React App README is pretty clear about the pros and cons of ejecting:

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

I suggest you read that carefully and decide if you are ready to make the split.

Here’s what happens when you eject

$ yarn ejectAre you sure you want to eject? This action is permanent. [y/N]> yEjecting...

Copying files into /Users/user/src/myApp

This replaces your project’s single dependency on react-scripts with the plethora of packages CRA depends on. It also moves some scripts and configurations into your project. Now you have full control of your project.

CSS Modules don’t allow dashes (“-” ) in class names so you will have to update any classes that use a dash. You’ll have to make this change both in the CSS and in the JSX, but a nice bonus is that your class names will be simpler — .App-header becomes just .header for example.

You’re on your own now

You’re done! No more Create React App. Now you are free to use whatever CSS Preprocessor your want. You’re a grown up now.

If you aren’t ready to eject yet, I know of at least one other approach that allows you to add CSS Module support without ejecting. But this adds another dependency to your project which goes against the point of sticking with CRA.

I hope this little tip was helpful to you. Or at least made you less afraid to eject. And of course, If you know of a better way to use CSS Modules with Create React App let me know in the comments!