Angular 10 issue on relative paths

Question

I have upgraded my angular project from 9 to 10. However I have an issue with an external scss that I'm using in angular.json, i.e.

In order to replicate it I tried to do it in a totally new project and it seems that I have the same issue:

1. ng new angular10

2. npm install roboto-fontface

3. add in angular.json

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

4. ng build

I receive the following error:

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 |     }

As a workaround I did the following:

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

where roboto.scss is:

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

which works nice. The idea came when I went in mixins.scss in node_modules/roboto-fontface/css/mixins.scss and I saw that $roboto-font-path: '../../../fonts' !default;

However I can't get why it works in angular<10 but not angular>=10

Thanks

Answer 1

Another way to overwrite the default value of '$roboto-font-path' is the use of "@use '...' with (..)" - see the sass website on variables.

Migrating from angular 9 to angular 10 I updated all the scss @imports in my current app to the 'new' syntax using @use (as IMHO this is the way sass recommends by now).

So my import of roboto now looks like:

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