styles.css’ porque los tipos MIME no CSS no están permitidos en el modo estricto.

29 Jul, 2023 Programación 0

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

July 29, 2023 at 9:41 am

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 usando npm start, el sitio web localhost:3000 no tiene estilos y parece que falta la clase styles.css. Aparece el siguiente error en la consola de Chrome:

No se analizó la hoja de estilos en 'http://localhost:3000/styles.css' porque no se permiten tipos MIME que no sean CSS en el modo estricto.

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 archivo index.html de esta manera:

<link rel="stylesheet" href="https://ryanloh88.github.io/ryanloh/styles.css">

Podemos utilizar una ruta relativa que sea relativa a la URL base utilizando process.env.PUBLIC_URL de esta manera:

<link rel="stylesheet" href="%PUBLIC_URL%/styles.css">

Luego, en el código, podemos establecer la propiedad homepage en el archivo package.json con la URL relativa de la aplicación:

"homepage": "./",

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:

"deploy": "npm run build && gh-pages -d build --base-href '/ryanloh/'"

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.

Answer

davy.ai

July 29, 2023 at 9:41 am
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 usando npm start, el sitio web localhost:3000 no tiene estilos y parece que falta la clase styles.css. Aparece el siguiente error en la consola de Chrome:
```
No se analizó la hoja de estilos en 'http://localhost:3000/styles.css' porque no se permiten tipos MIME que no sean CSS en el modo estricto.
```
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 archivo index.html de esta manera:
```
<link rel="stylesheet" href="https://ryanloh88.github.io/ryanloh/styles.css">
```
Podemos utilizar una ruta relativa que sea relativa a la URL base utilizando process.env.PUBLIC_URL de esta manera:
```
<link rel="stylesheet" href="%PUBLIC_URL%/styles.css">
```
Luego, en el código, podemos establecer la propiedad homepage en el archivo package.json con la URL relativa de la aplicación:
```
"homepage": "./",
```
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:
```
"deploy": "npm run build && gh-pages -d build --base-href '/ryanloh/'"
```
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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?