Angular 10 关于相对路径的问题

Question

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

为了复制它，我尝试在一个全新的项目中进行此操作，似乎我遇到了同样的问题：

1. 新的 Angular10

2. npm 安装 robots-fontface

3. 添加到 angular.json

   “构建”：{“构建器”：“@ angular-devkit / build-angular：浏览器”，“选项”：{“样式”：[“node_modules / roboto-fontface / css / roboto / sass / roboto-fontface.scss ", "src/styles.scss" ], ... }, }

4. 构建

我收到以下错误：

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"
    ],
    ...
  },
}

其中 robots.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，我使用@use将当前应用程序中的所有 scss @import更新为“新”语法（恕我直言，这是 sass 目前推荐的方式）。

所以我现在导入的 roboto 看起来像：

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