es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo obtener la URL de hosting de un archivo CSS en NextJs

29 Jul, 2023 Programación

Necesitaba alojar un archivo CSS y cargarlo en un iFrame en la página. He utilizado exitosamente file-loader en un proyecto de Preact. Pero cuando lo uso en NextJs, no funciona. No arroja ningún error. En realidad, proporciona una ruta relativa del archivo CSS, pero cuando intento abrir la URL agregando el host, NextJs devuelve un error 404.

A continuación se muestra el código principal:

import globalCssUrl from '!!file-loader!../styles/globals.css'

function MyApp({ Component, pageProps }) {
  // !!! /<em>next/f13a8c0924aa251b14eabf89c510c544.css
  // pero http://localhost:300/</em>next/f13a8c0924aa251b14eabf89c510c544.css devuelve 404
  console.log(globalCssUrl)

  return <component {...pageprops}=""></component>
}

export default MyApp

También he creado un proyecto de ejemplo aquí: https://github.com/ZenUml/next-app-get-hosting-url-of-a-file

PD. ¿Por qué no simplemente ponerlo en la carpeta “public”?
En esta demostración, es un archivo CSS local. En mi caso de uso real, es un archivo CSS de un módulo de nodos. Necesitaba usar un administrador de paquetes para gestionarlo.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás experimentando un problema al usar file-loader en un proyecto de Next.js. Si bien podría haber funcionado en un proyecto de Preact, Next.js tiene reglas y configuraciones diferentes que deben tenerse en cuenta.

    Una posible razón para el error 404 podría ser debido al renderizado del lado del servidor de Next.js, lo cual puede estar causando inconsistencias en la ruta del archivo. Para solucionar esto, puedes intentar usar la carpeta public incorporada de Next.js para alojar tu archivo CSS.

    Sin embargo, si necesitas gestionar el archivo CSS a través de la gestión de paquetes, puedes intentar usar un cargador diferente, como css-loader o style-loader. Estos cargadores te permiten importar archivos CSS directamente en tu código, sin necesidad de rutas de archivo.

    Aquí tienes un ejemplo de cómo importar un archivo CSS usando css-loader:

    import styles from '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <component {...pageprops}=""></component>;
}

export default MyApp;

    En este ejemplo, la variable styles contiene el contenido CSS del archivo globals.css, que se puede utilizar directamente en tus componentes.

    Recuerda instalar las dependencias necesarias (css-loader, style-loader) y configurarlas en los archivos de configuración de webpack de tu proyecto.

    En general, es importante comprender las diferencias entre los marcos de trabajo de los proyectos y sus respectivas configuraciones, y ajustar tu código en consecuencia.

Comments are closed.