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.

Mr world wide · Accepted Answer · 2018-10-31 16:35:14Z

51

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.

answered Oct 31, 2018 at 16:35

Mr world wide

4,86410 gold badges47 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hossein Mousavi Over a year ago

It worked, although why it is working? Both Scss and HTML files are in the same folder, so they should work with the same pointing route to the assets. (yes the path is working in the HTML file)

Alessandro C Over a year ago

with the slash it compiles, but I obtain a HTTP 404 in the frontend because it searches the resources outside the context root. What can I do in this case? (Angular 12)

redrom · Accepted Answer · 2021-03-01 14:55:07Z

10

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/

answered Mar 1, 2021 at 14:55

redrom

11.6k34 gold badges166 silver badges269 bronze badges

Comments

Atif Majeed · Accepted Answer · 2020-09-23 17:13:40Z

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'

Yisal Khan · Accepted Answer · 2021-08-27 20:59:21Z

2

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

answered Aug 27, 2021 at 20:59

Yisal Khan

3994 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related