3

Is there a default way to set localIdentName for css modules without ejecting?

I couldn't find such an option on the official docs so I decided to ask here if someone by any chance knows a way without ejecting and tempering with the webpack.config.js.

GockOckLock
  • 138
  • 1
  • 11
Jorayen
  • 1,737
  • 2
  • 21
  • 52

1 Answers1

-1

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.

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>

To read more - https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

Monika Mangal
  • 1,665
  • 7
  • 17
  • 1
    I read your question. localIdentName is set to use css-modules, but in create-react-app you cannot set that without ejecting. Hence, I have written the way you can use css-modules in create-react-app. – Monika Mangal Jul 15 '19 at 08:17
  • That is what my understanding was after reading your question. If that is not the case, please explain a bit more what are looking for. :-) – Monika Mangal Jul 15 '19 at 08:18
  • 2
    I was missing the part where I cannot set `localIdentName` without ejecting that was my question, not about how to set css modules without ejecting, but your comments clarify this, thanks. – Jorayen Jul 15 '19 at 08:21