He actualizado a la última aplicación Create React 4.0. Ahora el scss no puede resolver los activos de imagen en la carpeta pública. Estaba usando CRA 3.4.1 antes. Funcionó bien.
¿Algunas ideas? No quiero usar npm eject
El icon.svg está en public/images
background-image: url(/images/icon.svg);
Failed to compile. ./src/Components/style.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1! ./node_modules/postcss-loader/src??postcss! ./node_modules/resolve-url-loader??ref--5-oneOf-6-3! ./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4! ./src/Components/style.scss) Error: Can't resolve '../../../../../../icon.svg' in ''En Create React App 3.x, hacer referencia a una imagen de la carpeta pública en (S)CSS funcionó simplemente usando una barra inclinada inicial, como se ha respondido aquí .
Como ha explicado el OP, la imagen está en public/images y se hace referencia a ella como url(/images/icon.svg) .
Esto ya no funciona en Create React App 4.0.0 y da el mensaje de error Error: Can't resolve '../../../../../../icon.svg' in '' . El registro de cambios de la aplicación Create React no menciona un cambio importante con respecto a la carpeta pública.
Como solución temporal, puede mover las imágenes a src/ , importarlas directamente en los componentes import myImage from '../file.svg' y configurar style={{ backgroundImage: file }}> ?
Intente cambiar a esto: (el paquete web debería resolver esto en la ruta 'real')
background-image: url(./icon.svg); Sé que desea agregar la imagen como una propiedad css de imagen de fondo , pero tal vez otro enfoque sea relevante para usted.
Cuando importas así, lo usas exactamente como usarías un Componente normal:
import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg'; <Icon />Fuente: https://create-react-app.dev/docs/adding-images-fonts-and-files/
Creo que está en desuso en CRA 4 (después de todo... fue un cambio importante...) hay algunas soluciones usando craco pero sugiero mover estos archivos a la carpeta src .