How to use css modules with create-react-app?

Muhammad Saqib picture Muhammad Saqib · May 8, 2018 · Viewed 26.3k times · Source

According to a tweet by Dan Abramov, CSS modules support is there in create-react-app (CRA). One just needs to give extension of module.css to his stylesheets to enable the feature, but this is not working with me. I am having version 1.1.4 of react-scripts. How can I enable css modules with CRA? Thanks

Answer

Michael McQuade picture Michael McQuade · Jul 2, 2018

You do not need to eject.

Create React App supports CSS Modules right out of the box as of version 2, which is now stable.

Upgrade to v2 (react-scripts@latest) by running yarn upgrade react-scripts@latest or npm install --save react-scripts@latest.

You just have to create a file with the extension .module.css

For example:

.myStyle {
  color: #fff
}

Then you can use it like so:

import React from 'react'
import styles from './mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>