Estoy usando Create-React-App y quiero agregar una imagen de fondo para mi sección de encabezado y lo estoy haciendo de esa manera:
background-image: url('~/Screenshot_11.png');Después de esto estoy recibiendo este error:
./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!. /node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/styles/main.scss) Módulo no encontrado: intentó importar ../../. ./../../../../Screenshot_11.png que queda fuera del directorio src/ del proyecto. No se admiten las importaciones relativas fuera de src/.
Configuré la página de inicio en package.json
"homepage": "http://localhost:3000",En mis proyectos anteriores eso funciona pero hoy no puedo importar esto correctamente.
Han cambiado eso, pero no sé por qué. Ruta de trabajo:
background-image: url('/Screenshot_11.png');EDITAR 2021
Para la gente que piensa que no funciona:
puedes importar esa imagen como
import Background from './Screenshot_11.png'y use
background-image: `url(${Background})`Esto todavía no me funciona con imágenes en la carpeta pública.
ACTUALIZADO 19 marzo 2021
Con respecto al uso de <ROOT/public/images> en archivos .css.
Parece ser un cambio importante (¿se considerará un error?) en el paquete create-react-app (react-scripts) v4.x.
Y más precisamente en el paquete 'css-loader' v4.x.
La rama 3.x funciona bien con eso.
Aquí está el problema correspondiente en el repositorio de github:
https://github.com/facebook/create-react-app/issues/9870
(y hay pocos más en realidad).
Sin arreglos (todavía). (¿sera?..)
Pero algunas soluciones mencionadas allí. Cuál usar... depende de tu proyecto, supongo.
Algunas de las soluciones:
degradar a react-scripts 3.4.x
no use url en archivos CSS :) aún puede usar en .JSX (estilos en línea). O poner en .html. Obviamente, css-loader no los procesa.
reconfigure webpack para agregar url:false a las opciones de css-loader (expulse CRA o use esto: https://github.com/gsoft-inc/craco o esto: https://github.com/timarney/react-app- recableado (puede encontrar configuraciones de muestra en la página de problemas de github)
use esta nueva función de css-loader https://github.com/webpack-contrib/css-loader/pull/1264 (lanzado en 5.1.0, la última versión actual es 5.1.3; para usar esa versión, puede agregar el siguiente al paquete.json: "resoluciones": { "css-loader": "5.1.3" } (en el nivel raíz))