angular v11 + Scss 编译失败

Question

我们有一个现有的带有scss 设置架构的角度项目，例如this，但是在使用角度cli v11 升级到角度v11 后，我们遇到了这个问题，无法找到导致它的原因

有人可以帮助我们吗？

我也创建了stackblitz。

提前谢谢你。

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

我克隆了你的 repo 而不是你的 stackblitz，因为在某些情况下 Stackblitz 无法识别 scss imports 上的绝对路径

已找到问题并为了解决您的问题：

1.) 将/ 放在$icon-url 的start 和end 的_variables.scss 上：

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

2.) 在您的app.component.scss

删除@import "../style/app.scss";，因为这是非常多余的，因为variables 已经导入到您的standards scss 文件中。就这样吧：

@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

您的网址有问题。根据您的 stakckbliz，您在 assets 中有一个 icons 文件夹，但错误告诉您它正在尝试访问 ./assets/iconscaret-down-blue-16.png。您想要./assets/icons/caret-down-blue-16.png，因此将斜杠添加到$icon-url 或将其附加到caret-down-blue-16.png 之前。如果您有多个图标，第一个选项会更好，因此您可以进行全局修复