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 | 

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

Answer 2

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