相对路径上的角10问题

Question

为了复制它，我试图在一个全新的项目中做到这一点，似乎我也有同样的问题：

>

ng new angular10

npm安装roboto-fontface

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；

然而，我不明白为什么它工作在角<10，而不是角>=10

Answer 1

覆盖默认值'$roboto-font-path'的另一种方法是使用“@use'...'with（..）”-参见sass关于变量的网站。

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

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

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