Angular 相对路径上的角度10问题

我已将我的角度项目从9升级到10。但是，我在angular.json中使用的外部SCS有一个问题，即

为了复制它，我尝试在一个全新的项目中进行，似乎我也有同样的问题：

ng新安格尔10

npm安装roboto fontface

外接程序angular.json

“构建”：{ “生成器”：“@angular devkit/build angular:browser”， “选择”：{ “风格”：[ “node_modules/roboto fontface/css/roboto/sass/roboto fontface.scss”， “src/styles.scss” ], ... }, }

ng构建

我收到以下错误：

ERROR in ./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/s
ass-loader/dist/cjs.js??ref--13-4!./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\P70363\MyProjects\mixins.scss:17:8: Can't resolve '../../../../../fonts/roboto/Roboto-Black.woff' in 'C:\Users\P70363\MyProjects\deleteme\angular10\node_module
s\roboto-fontface\css\roboto\sass'

  15 |     @font-face {
  16 |         font-family: '#{$variant}-#{$type}';
> 17 |         src: url('#{$font-full-path}-#{$type}.woff2') format('woff2'),
     |        ^
  18 |              url('#{$font-full-path}-#{$type}.woff') format('woff');
  19 |     }

作为解决办法，我做了以下工作：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "styles": [
      "src/add-roboto.scss",
      "src/styles.scss"
    ],
    ...
  },
}

其中roboto.scss是：

$roboto-font-path: '../fonts' !default;
@import 'node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss';

这很好用。当我进入node_modules/roboto fontface/css/mixins.scss中的mixins.scss时，我看到$roboto font path:“../../../font”！违约

但是我不明白为什么它在角度=10时工作

---

谢谢

另一种覆盖“$roboto font path”默认值的方法是使用“@use”…”和（…”——请参见sass网站上的变量

从angular 9迁移到angular 10，我使用@use将当前应用程序中的所有SCS@imports更新为“新”语法（正如我所知，这是sass目前推荐的方式）

因此，我现在导入的roboto如下所示：

@use 'roboto-fontface/css/roboto/sass/roboto-fontface' with (
  $roboto-font-path: '~roboto-fontface/fonts'
);

---

您好，我想您的软件包没有更新到10。你最好下载并把你的字体放在资产文件夹中，正如其中一个答案所建议的那样。这是你的问题，我想这需要更多的投票。我刚从9点升级到11点，有着完全相同的问题。不知道是否有合适的方法来处理这个问题。我也遇到了同样的问题，我将node.js版本从9升级到15，angular从9升级到11。问题会解决的，希望能对你有所帮助。