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 |
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 asvariables
is already imported on yourstandards
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");
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.