[英]angular v11 + Scss failed to compile
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我们有一个现有的 angular 项目,具有类似这样的
scss
设置架构,但是在升级到 angular v11 和 angular cli v11 后,我们发现它无法找到导致此问题的原因,
can someone help us?有人可以帮助我们吗?
I have also created stackblitz as well.我也创建了stackblitz 。
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
我已经克隆了你的 repo而不是你的 stackblitz,因为有些实例 Stackblitz 无法识别
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
: 1.) 将
/
放在$icon-url
的start
和end
处_variables.scss
:
$icon-url: "/assets/icons/";
2.) On your app.component.scss
2.) 在你的
app.component.scss
remove
@import "../style/app.scss";
删除
@import "../style/app.scss";
since this is quite redundant asvariables
is already imported on yourstandards
scss file.因为这是非常多余的,因为
variables
已经导入到您的standards
scss 文件中。 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.您的 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
.根据您的 stakckbliz,您在
assets
中有一个icons
文件夹,但错误告诉您它正在尝试访问./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
.您想要
./assets/icons/caret-down-blue-16.png
,因此在caret-down-blue-16.png
之前将斜杠添加到$icon-url
或 append 。 The first option is better if you have several icons, so you do the global fix如果您有多个图标,第一个选项会更好,因此您可以进行全局修复
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.