相对路径上的 Angular 10 问题

Question

我已将我的 angular 项目从 9 升级到 10。但是我在 angular.json 中使用的外部 scss 有问题，即
为了复制它，我尝试在一个全新的项目中进行，似乎我遇到了同样的问题:

ng 新的 angular10

npm 安装机器人字体

添加 angular.json
“ build ”: {
"builder": "@angular-devkit/build-angular:browser",
“选项”: {
“风格”:[
"node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
“src/styles.scss”
],
...
},
}

构建

我收到以下错误:

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: '../../../fonts' !default;
但是我不明白为什么它在 angular<10 但不是 angular>=10
谢谢

Answer 1

覆盖“$roboto-font-path”默认值的另一种方法是使用“@use '...' with (..)” - 请参阅变量的 sass 网站。
从 angular 9 迁移到 angular 10 我更新了所有 scss @imports 在我当前的应用程序中使用 转换为"new"语法@使用 (恕我直言，这是 sass 现在推荐的方式)。
所以我的机器人导入现在看起来像:

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