Solvedangular cli SCSS "Module not found: Error: Can't resolve" for @font-face url with relative path

Please provide us with the following information:

OS?

Linux (Docker hub image: mhart/alpine-node:6.9.4) on OSX host

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

@angular/cli: 1.0.0-rc.1
node: 6.9.4
os: linux x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Importing a font with sass using relative path:

@font-face {
  font-family: 'Gotham-Light';
  src: url('../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'),  
    url('../fonts/Gotham-Light.otf')  format('opentype'),
    url('../fonts/Gotham-Light.woff') format('woff'), 
    url('../fonts/Gotham-Light.ttf')  format('truetype'),
    url('../fonts/Gotham-Light.svg#Gotham-Light') format('svg');
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
}

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss
Module not found: Error: Can't resolve '../fonts/Gotham-Light.eot' in '/code/src'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:108-144
 @ ./src/styles.scss
 @ multi ./~/material-design-icons/iconfont/material-icons.css

Mention any other details that might be useful.

Looks like this may be related to #4778

From my understanding relatives paths in url() was fixed for @import, maybe something additional needs to be done for @font-face

Also, this error doesn't occur when using the absolute path starting from src/, the error only appears when using the relative path.

---

Thanks! We'll be in touch soon.

Searched around and apparently this is just how sass loader works: sass/sass#1015

There's a suggestion for using https://github.com/bholloway/resolve-url-loader, but it does have the serious limitation of not working without sourcemaps. This is a big problem because component css doesn't support sourcemaps at all, and your project shouldn't die just because sourcemaps aren't there.

So I think the recommended approach here is to put these font files in the assets folder, and use absolute paths (starting with /) for urls in sass files that are imported by other sass files.

@font-face {
  font-family: 'Gotham-Light';
  src: url('/assets/fonts/Gotham-Light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
}

If anyone has a better way I'm happy to hear it.

It seems to me this does not "work as intended". You need to provide a way for libraries with relative scss imports to work, given that webpack projects can do this. Otherwise we have to try hack a workaround, ditch the scss library or remove angular-cli.

Hm I'm looking at your example repo and as far as I can tell what's happening is that the font is always being resolved relative to the initial entry point (styles.scss).

So if I change it url('app/lib/fonts/Gotham-Light.otf') it works.

This looks like a bug somewhere really.

My solution for now was to create css instead of scss files for importing fonts from relative paths, and add the import of the css file into src/styles.scss.

@jigneshkhokhani your issue is unrelated to this item. Please look for a similar issue or create a new one.