No se pudo analizar la hoja de estilo en ‘http://localhost:3000/styles.css’ porque los tipos MIME no CSS no están permitidos en el modo estricto.
Después de crear mi aplicación de React localmente, instalé GitHub Pages usando npm install gh-pages --save-dev
y añadí tanto
"homepage": "https://ryanloh88.github.io/ryanloh/"
como
"scripts": {
"predeploy":"npm run build",
"deploy":"gh-pages -d build",...}
a mi archivo package.json
. Después de ejecutar npm run deploy
, mi página web se carga correctamente en las páginas de GitHub y todo funciona bien allí. Sin embargo, cuando probé mi aplicación local utilizando npm start
, mi página web localhost:3000
se muestra sin estilo y parece que falta la clase styles.css
. Cuando reviso la consola de Chrome, muestra el siguiente mensaje:
No se pudo analizar la hoja de estilos en 'http://localhost:3000/styles.css' porque no se permiten tipos MIME que no sean CSS en el modo estricto.
Intenté buscar el problema en línea, pero no tuve suerte. Cualquier ayuda sería muy apreciada.
davy.ai
Solución de problemas de problemas de estilo en la aplicación local de React después de desplegar en GitHub Pages
Descripción del problema
Después de desplegar correctamente una aplicación de React en GitHub Pages usando
npm run deploy
, el sitio web muestra correctamente los estilos en la página de GitHub Pages. Sin embargo, al probar la aplicación localmente usandonpm start
, el sitio weblocalhost:3000
no tiene estilos y parece que falta la clasestyles.css
. Aparece el siguiente error en la consola de Chrome:Solución
El problema de que los estilos no se muestren en la versión local de la aplicación de React después de desplegar en GitHub Pages puede ser causado por varios factores, pero lo más probable es que sea porque las rutas de archivo relativas no se han actualizado correctamente.
Cuando se despliega en GitHub Pages, la URL base de la aplicación cambia para que coincida con su URL de GitHub Pages. Sin embargo, al ejecutar la aplicación localmente, la URL base sigue siendo la misma. Esto significa que si las rutas de archivo en el código están configuradas para funcionar con la URL de GitHub Pages, no funcionarán con la URL local.
Para resolver el problema, las rutas de archivo en el código deben actualizarse para que sean relativas a la URL base, en lugar de ser absolutas. Una posible solución es utilizar la variable de entorno
process.env.PUBLIC_URL
para crear rutas relativas.Por ejemplo, en lugar de utilizar una ruta absoluta para el atributo
href
de un elemento<link>
en el archivoindex.html
de esta manera:Podemos utilizar una ruta relativa que sea relativa a la URL base utilizando
process.env.PUBLIC_URL
de esta manera:Luego, en el código, podemos establecer la propiedad
homepage
en el archivopackage.json
con la URL relativa de la aplicación:Finalmente, al desplegar en GitHub Pages, podemos utilizar el paquete npm
gh-pages
para crear automáticamente la URL base correcta para la aplicación desplegada utilizando la opción--base-href
:Con estos cambios, la aplicación debería poder manejar las diferentes URL base correctamente y mostrar los estilos correctamente tanto en el sitio de GitHub Pages desplegado como en local.