1

We have an existing angular project with scss setup architecture like this but after upgrading to angular v11 with angular cli v11, we are facing this issue, not able to find what is causing it this

can someone help us?

I have also created stackblitz as well.

Thank you in advance.

Error: ./src/app/app.component.scss
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\VNelapati\Projects\NXT_Gen\app.component.scss:11:4: Can't resolve './assets/iconscaret-down-blue-16.png' in 'C:\Users\VNelapati\Projects\NXT_Gen\ax-upgrade\angular11\src\app'

   9 |     right: 16px;
  10 |     cursor: pointer;
> 11 |     background-image: url($icon-url +"caret-down-blue-16.png");
     |    ^
  12 | }
  13 | 

2 Answers 2

1

I have cloned your repo instead of your stackblitz since there are instances that Stackblitz doesn't recognize absolute paths on scss imports

Have found the problem and In order to resolve your issue:

1.) Put / at the start and end of your $icon-url on your _variables.scss:

$icon-url: "/assets/icons/";

2.) On your app.component.scss

remove @import "../style/app.scss"; since this is quite redundant as variables is already imported on your standards scss file. Just have it like this:

@import "standards";


body {
    width: 24px;
    height: 24px;
    top: 16px;
    right: 16px;
    cursor: pointer;
    background-image: url($icon-url +"caret-down-blue-16.png");
}
Sign up to request clarification or add additional context in comments.

Comments

0

You have a problem with your url. Based on your stakckbliz, you have an icons folder inside assets but the error tells you it is trying to access ./assets/iconscaret-down-blue-16.png. You want ./assets/icons/caret-down-blue-16.png, so add the slash to either $icon-url or append it before caret-down-blue-16.png. The first option is better if you have several icons, so you do the global fix

3 Comments

Thanks for answering @PMO1948. I tried both ways but the same error is coming. I have updated the stackblitz too imgur.com/a/mluKvdZ
at a second look at the error - it is looking for the assets folder in src/app as opposed to just src. The issue still seems to be with your path - maybe try an absolute path or adding a slash before assets?
Trying @PMO1948

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.