¿Cómo usar los módulos css con create-react-app?

Solución:

No es necesario que lo expulse.

La aplicación Create React es compatible con módulos CSS de inmediato a partir de la versión 2.

Actualice a la última ([email protected]) versión.

Si usa hilo:

yarn upgrade [email protected]

Si usa npm:

npm install --save [email protected]

Entonces solo tienes que crear un archivo con la extensión .module.css

Por ejemplo:

.myStyle {
  color: #fff
}

Entonces puedes usarlo así:

import React from 'react'
import styles from './mycssmodule.module.css'

export default () => <div className={styles.myStyle}>We are styled!</div>

Para habilitar el módulo CSS en su aplicación, no necesita expulsar create-react-app. Puede seguir estos sencillos pasos descritos en este enlace para utilizar el módulo CSS en su proyecto.

Pero en caso de que haya expulsado su aplicación create-react-app, debe encontrar el archivo llamado

“webpack.config.js”

abra este archivo y busque este {test: cssRegex …. etc} en la línea no. 391 y reemplace a estos cambios:

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

Abra el archivo .js y la declaración de importación como esta

import cssStyleClassName from './MyApp.css';

Entonces esta declaración de importación le permite hacer los siguientes cambios en las etiquetas de los componentes como este

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

styleName es lo que definió en su archivo MyAppStyle.css

.styleName{
your properties here...
}

Después de expulsar su aplicación, debe reiniciar su servidor local, en algún momento los cambios no se reflejan.

Nota En la versión anterior, había dos archivos generados para producción y desarrollo por separado. Ahora, en la versión actual, un archivo llamado “webpack.config.js” archivo por el que debe preocuparse por los cambios. Gracias.

---

---

Utiliza Nuestro Buscador