Nuestros desarrolladores estrellas han agotado sus depósitos de café, en su búsqueda a tiempo completo por la resolución, hasta que Óscar encontró la contestación en Gogs así que hoy la comparte con nosotros.
Solución:
No es necesario expulsar.
La aplicación Create React es compatible con los módulos CSS desde el primer momento a partir de la versión 2.
Actualizar a la última ([email protected]) versión.
Si usas 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 () => We are styled!
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, entonces debe encontrar el archivo llamado
“webpack.config.js”
abra este archivo y encuentre 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 e importe una declaración como esta
import cssStyleClassName from './MyApp.css';
Luego, esta declaración de importación le permite realizar los siguientes cambios en las etiquetas de componentes como este
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, a veces 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, hay un archivo llamado “webpack.config.js” para el que debe preocuparse por los cambios. Gracias.
Recuerda que puedes mostrar este ensayo si lograste el éxito.