Module Error (Emitted value instead of an instance of Error)

Question

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'

Why it is throwing an error. the correct image present in my images. I tried rebuilding the npm rebuild but no luck.

Answer 1

Just added single slash / in my background:url(/../../assets) and its working as expected as per documentation it means it will look from the current path.

Answer 2

Replace path from this:

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

To this:

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

The change in the path to file is key: ~assets/

Answer 3

I received similar error while building an Angular CLI application after upgrading the application from Angular 8 to Angular 10. A component was using an scss file that had a path to an image in the assets folder (e.g. assets/images/test.jpg). This path to the image worked in Angular 8 (e.g. assets/images/test.jpg) but did not work after the upgrade. The build will break with the following error as it was looking for the image file relative to the current directory the component was in. The file would not display on the page also. I changed the path relative to the component's folder such as ../../../../assets/images/test.jpg that resolved the issue.

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

Answer 4

The solution is to add / to the beginning of the path: example: /assets/images/bg-1.png where assets are located in the root under src Folder