angular v11 + Scss failed to compile

Question

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

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 |

KShewengger · Accepted Answer · 2020-12-01 08:27:20Z

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");
}

edited Dec 1, 2020 at 8:27

answered Dec 1, 2020 at 8:21

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

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

Comments

PMO1948 · Accepted Answer · 2020-12-01 07:19:14Z

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

answered Dec 1, 2020 at 7:19

PMO1948

2,5841 gold badge17 silver badges43 bronze badges

3 Comments

Krishna Over a year ago

Thanks for answering @PMO1948. I tried both ways but the same error is coming. I have updated the stackblitz too imgur.com/a/mluKvdZ

PMO1948 Over a year ago

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?

Krishna Over a year ago

Trying @PMO1948

Collectives™ on Stack Overflow

angular v11 + Scss failed to compile

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related