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
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>