angular v11 + Scss 编译失败

Question

我们有一个现有的 angular 项目，其 scss 设置架构类似于 this but after upgrading to angular v11 with angular cli v11, we are facing this issue, not able to find what is causing it

有人可以帮助我们吗？

我也创建了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

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

Answer 2

我已经 克隆了你的 repo 而不是你的 stackblitz，因为在某些情况下 Stackblitz 无法识别 scss imports

上的绝对路径

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

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

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

2.) 在你的 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");
}

angular v11 + Scss 编译失败

angular v11 + Scss failed to compile

angular

sass

angular-cli

angular11