create-react-app 中的 css 模块 localIdentName

Question

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 .

Answer 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

Answer 2

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 .