How to fix postcss Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js): Can't resolve .woff

I had this issue with embedding fonts in an Angular application:

Module Error (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js): Can't resolve .woff

Solution

The solution here is to use absolute paths instead of relative. Weirdly, this fixes it. So, change:

@font-face {
  font-family: "Embedded font";
  src: url("../../assets/fonts/sans/embedded-font.woff") format('woff');
}

to:

@font-face {
  font-family: "Embedded font";
  src: url("/assets/fonts/sans/embedded-font.woff") format('woff');
}