angular-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 https://github.com/angular/angular-cli/issues/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.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 7
- Comments: 24 (8 by maintainers)
Searched around and apparently this is just how sass loader works: https://github.com/sass/sass/issues/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.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 ofscss
files for importing fonts from relative paths, and add the import of the css file intosrc/styles.scss
.Maybe I’m confused, but importing as raw css does not solve the problem for anyone who wants to import an external stylesheet as a sass file so that they can
@extend
or@include
something in it, if that stylesheet contains relative urls.Without Modifying Webpack Config, This work:
@jigneshkhokhani your issue is unrelated to this item. Please look for a similar issue or create a new one.
@This is still not working for me. I serve my app from a subdirectory, as in
http://myserver.com/subdir
. I have setoutDir
and<base>
correctly and the app runs fine. However, fonts referred to by URLs in@font-face
directories, when specified as/assets/fonts/...
do not load, because it tries to load them fromhttp://myserver.com/assets/fonts
instead ofhttp://myserver.com/subdir/assets/fonts
. If I specify the URL asassets/fonts
or./assets/fonts
, then I get a build errorSo I am stuck. I tried moving the
@font-face
directives into a CSS file, and including that in thestyles
property ofangular-cli.json
, but ended up with almost exactly the same problem. I finally put them directly in a<style>
tag in myindex.html
, and that works, but certainly there must be a better way?I spent a day of painful researches and still has this issue. I tried every workaround in this topic and also read https://github.com/sass/sass/issues/1015 https://github.com/angular/angular-cli/issues/9185 https://github.com/angular/angular-cli/issues/3757 https://github.com/angular/angular-cli/issues/2403
On local machine (OS X 10.13.3) all works fine, but on gitlab runner (ubuntu image) command
ng build --prod
fail with erroralso try
also try to switch from scss to css and import it and with this version app build without error, but when I launch it I see 404 for this font.
How can I solve this?
@filipesilva you are right, but thing is while deploy code on server it is again showing “no module found”
so i have tried using
/assets
toassets
but not working any idea ?In fresh app when I ran
npm install
ornpm install --save
and then runng 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.But after that I switch finally to yarn and it working like charm 😃
yarn install
generate yarn.lock file and it resolved my issue.