v10 - referencing fonts from assets in sass fails

[klemenoslaj]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 9.x.x

Description

After upgrading to Angular 10 the files from assets, referenced in the scss fail to build.
I managed to reproduce it with ng new <name> --minimal as well.

🔬 Minimal Reproduction

• clone repo: https://github.com/klemenoslaj/angular-cli-broken-assets-styles
• install dependencies (I used yarn - included yarn.lock)
• execute ng build or ng serve

🔥 Exception or Error

ERROR in ./src/styles.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/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /.../experimental/broken-assets-ng10/styles.scss:6:2: Can't resolve '/assets/fonts/MaterialIcons-Regular.eot' in '/.../experimental/broken-assets-ng10/src'

  4 |   font-style: normal;
  5 |   font-weight: 400;
> 6 |   src: url("~/assets/fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
    |  ^
  7 |   src: local("Material Icons"), local("~/assets/fonts/MaterialIcons-Regular"),
  8 |     url("~/assets/fonts/MaterialIcons-Regular.woff2") format("woff2"),

🌍 Your Environment

Angular CLI: 10.0.0
Node: 12.16.1
OS: darwin x64

Angular: 10.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.0
@angular-devkit/build-angular     0.1000.0
@angular-devkit/build-optimizer   0.1000.0
@angular-devkit/build-webpack     0.1000.0
@angular-devkit/core              10.0.0
@angular-devkit/schematics        10.0.0
@ngtools/webpack                  10.0.0
@schematics/angular               10.0.0
@schematics/update                0.1000.0
rxjs                              6.5.5
typescript                        3.9.5
webpack                           4.43.0

[destus90]

I had the same issue yesterday. In your case you need to update the font path to be relative from the SCSS file.
#18013

[alan-agius4]

@klemenoslaj, in the reproduction provided open-sans-v17-latin-300.woff2 doesn't exist. Thus, the error is legit.

[alan-agius4]

And indeed this might also be related to #18013.

[klemenoslaj]

@klemenoslaj, in the reproduction provided open-sans-v17-latin-300.woff2 doesn't exist. Thus, the error is legit.

Yes, my bad. I have updated error in the issue and the repo to reproduce this properly. Sorry for this.

[klemenoslaj]

I had the same issue yesterday. In your case you need to update the font path to be relative from the SCSS file.
#18013

This seems to only work if the assets are physically present in the assets folder. It doesn't work if I use the copying mechanism of Angular CLI using, like the following:

{
  "glob": "**/*.{eot,woff2,woff,ttf}",
  "input": "./node_modules/material-design-icons/iconfont",
  "output": "/assets/fonts/"
}

@alan-agius4 do you want me to create a separate branch for working example & not working with globs copying?

[alan-agius4]

@klemenoslaj in that case you will need to use root paths example /assets/foo.png.

[klemenoslaj]

Yes that solves it 👍

So this is the official solution then? In this case I can close the issue 👍

[alan-agius4]

Yeah it is.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}