Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

450
Visualizações
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

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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>
over 4 years ago · Santiago Trujillo Relatório

0

To enable CSS module in to your app, you don't need to eject create-react-app. You can follow these simple steps described in this link to use CSS module in your project.

But in case if you ejected your create-react-app, then you must find file named

"webpack.config.js"

open this file and find this {test:cssRegex....etc} in line no. 391 and replace to this changes:

            {
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }),
            },

Open .js file and import statement like this

import cssStyleClassName from './MyApp.css';

Then this import statement allow you to do following changes in component tags like this

<div className={cssStyleClassName.styleName}></div>

styleName is what you defined in your MyAppStyle.css file

.styleName{
your properties here...
}

After eject your app, you must restart your local server, sometime changes don't get reflect.

Note In earlier version there were two generated file for production and dev separately. Now in current version one file named "webpack.config.js" file for which you need to concerned for changes. Thank you.

over 4 years ago · Santiago Trujillo Relatório

0

i am using 3.4.1 version of the react-scripts so here is my approach

  1. run the command :npm run eject 2.Then you will get a config file , in that open webpack.config.js
  2. And search test: cssRegex or just search cssRegex
  3. now you will see something like this:
test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),

now after importLoaders:1, add modules:true, and just save the file. 5.Now you can restart the server using npm start and you will see your styles applied. (if you already know them how to use)

here when I used [name]__[local]__[hash:base64:5] because I got an error that

 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }


so I removed it and I just used modules:true and it worked for me.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda