angular v11 + Scss 编译失败

Question

我们有一个现有的 angular 项目，具有类似这样的scss设置架构，但是在升级到 angular v11 和 angular cli 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

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