Search code examples
reactjscreate-react-appcss-modules

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

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

Solution

  • You do not need to eject.

    Create React App supports CSS Modules right out of the box as of version 2.

    Upgrade to the latest (react-scripts@latest) version.

    If you use yarn:

    yarn upgrade react-scripts@latest

    If you use npm:

    npm install --save react-scripts@latest

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