Error de módulo (valor emitido en lugar de una instancia de error)

15

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ERROR in ./src/scss/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/scss/styles.scss) Module Error (from ./node_modules/postcss-loader/lib/index.js): (Emitted value instead of an instance of Error) CssSyntaxError: C:\xampp\htdocs\projectA\postGrad-Frontend\src\scss\pages\login.scss:6:13: Can't resolve '../../assets/images/login-bg.jpg' in 'C:\xampp\htdocs\projectA\postGrad-Frontend\src\scss'

Por qué arroja un error. la imagen correcta presente en mis imágenes. Intenté reconstruir el npm rebuildpero no tuve suerte.

40

Acabo de agregar una sola barra /en mi background:url(/../../assets)y funciona como se esperaba según la documentación, lo que significa que se verá desde elcurrent path.

1
  • 3
    Funcionó, aunque ¿por qué funciona? Tanto los archivos Scss como los HTML están en la misma carpeta, por lo que deberían funcionar con la misma ruta de apuntado a los activos. (sí, la ruta funciona en el archivo HTML) 6 abr.20 a las 8:58
5

Reemplazar ruta de esto:

@font-face {
  font-family: 'Effra';
  src: url('assets/fonts/Effra_W_It.ttf') format("truetype");
  font-weight:400;
  font-style: italic;
}

A esto:

@font-face {
  font-family: 'Effra';
  src: url("~assets/fonts/Effra_W_It.ttf") format("truetype");
  font-weight:400;
  font-style: italic;
}

El cambio en la ruta al archivo es clave: ~ assets /

3

Recibí un error similar al crear una aplicación CLI de Angular después de actualizar la aplicación de Angular 8 a Angular 10. Un componente estaba usando un archivo scss que tenía una ruta a una imagen en la assetscarpeta (por ejemplo assets/images/test.jpg). Esta ruta a la imagen funcionó en Angular 8 (por ejemplo assets/images/test.jpg) pero no funcionó después de la actualización. La compilación se interrumpirá con el siguiente error, ya que buscaba el archivo de imagen relativo al directorio actual en el que se encontraba el componente. El archivo tampoco se mostraría en la página. Cambié la ruta relativa a la carpeta del componente, de modo ../../../../assets/images/test.jpgque resolvió el problema.

Error: (Emitted value instead of an instance of Error) CssSyntaxError: C:\myproject\my.component.scss:10:12: Can't resolve './assets/images/test.jpg'

1

La solución es agregar /al comienzo de la ruta: ejemplo: /assets/images/bg-1.pngdonde los activos se encuentran en la raíz en la carpeta src