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

[JSMike]

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.

[JSMike]

I've created an example repository for this issue: https://github.com/JSMike/angular-cli-issue-5213

The result is:

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.otf' in '/code/src'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader!./~/sass-loader!./src/styles.scss 6:168-204
 @ ./src/styles.scss
 @ multi ./src/styles.scss
webpack: Failed to compile.

[filipesilva]

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.

[filipesilva]

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.

[JSMike]

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.

[filipesilva]

I'm closing it as 'working as intended' as per sass then.

[pmchugh3]

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.

[jigneshkhokhani]

In fresh app when I ran npm install or npm install --save and then run ng s then it gives me error like below. I think because of package-lock.json file is not generated for me in fresh app after running npm install.

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:914:18)
    at Object.getInstalledBinaries (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/extensions.js:124:13)
    at foundBinariesList (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:571:32)
 @ ./src/styles.scss 4:14-189
 @ multi ./src/styles.scss

ERROR in ./src/app/app.component.scss
Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/vendor'
    at Object.fs.readdirSync (fs.js:914:18)
    at Object.getInstalledBinaries (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/extensions.js:124:13)
    at foundBinariesList (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/jigneshkhokhani/sites/workspace/fitness/node_modules/sass-loader/lib/loader.js:3:14)
    at Module._compile (module.js:571:32)
 @ ./src/app/app.component.ts 18:17-48
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

But after that I switch finally to yarn and it working like charm :)
yarn install generate yarn.lock file and it resolved my issue.

[JSMike]

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