Sage 9 Font Issue : resolve-url-loader

Hello,

I’m just new to using Sage(Sage 9.0.10) with Bedrock, and I encountered error on using custom fonts.
What I did so far:

  1. Added font ( .ttf ) to resources/assets/fonts

  2. Created _fonts.scss to resources/assets/styles/common

  3. Inside _fonts.scss
    @font-face {
    font-family: “BigCaslon”;
    src: url("…/…/fonts/BigCaslon.ttf") format(“truetype”);
    font-weight: normal;
    font-style: normal;
    }

  4. Imported in main.scss “@import “common/fonts”;” but never used the font yet

  5. Executed “npm run build” and will result to error.
    ERROR Failed to compile with 2 errors
    error in ./resources/assets/styles/main.scss

    Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error
    predicate must return an absolute path or the result of calling next()

What did I miss? What is lacking step?
Please help, thanks

3 Likes

I am having the same issue. Looks like the package resolve-url-loader has an issue with relative paths, now.

For what it’s worth, I am running Node v10.20.1, Sage 9.0.10. Attempted to downgrade the package to 2.3.2, but this throws another error.

Seems like downgrading to sage 9.0.9 is the best resolution at the moment?

1 Like

Yeah, using sage 9.0.9 worked for me, which I also got from this discussion

I hope they can fix the sage v9.0.10 soon

I am having the same problem too.
sage 9.0.10
main.scss:
.main { background-image: url(../images/1a.jpg);

yarn build gets an error:

ERROR Failed to compile with 2 errors 23:32:48 error in ./resources/assets/styles/main.scss ERROR Failed to compile with 2 errors 23:32:48 error in ./resources/assets/styles/main.scss Module build failed: ModuleBuildError: Module build failed: Error: resolve-url-loader: CSS error predicate must return an absolute path or the result of calling next() at file:///Users/m/Sites/bedrock/web/app/themes/sage/resources/assets/styles/main.scss:9544:3 at encodeError (/Users/m/Sites/bedrock/web/app/themes/sage/node_modules/resolve-url-loader/index.js:219:12) at onFailure (/Users/m/Sites/bedrock/web/app/themes/sage/node_modules/resolve-url-loader/index.js:176:14) at /Users/m/Sites/bedrock/web/app/themes/sage/node_modules/webpack/lib/NormalModule.js:195:19 at /Users/m/Sites/bedrock/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:367:11 at /Users/m/Sites/bedrock/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:233:18 at context.callback (/Users/m/Sites/sage/web/app/themes/sage/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at onFailure (/Users/m/Sites/bedrock/web/app/themes/sage/node_modules/resolve-url-loader/index.js:176:5)

I tried main.scss:
background-image: url(../../images/1a.jpg);

background-image: url("../images/1a.jpg");

please help.

This is still and issue.

Kind of a major issue if you cant develop with font-face fonts.

Would have thought a fix would have been released ASAP???

@font-face {
    font-family: 'Lazer';
    src: local('Lazer'), url('../../fonts/lazer.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}

1 Like

Sorry to post again so soon but I did just manage to find a workaround!

If you use a path from web root instead of a relative one it works…

@font-face {
    font-family: 'Lazer';
    src: local('Lazer'), url('/app/themes/sage-theme/resources/assets/fonts/lazer.woff') format('woff');
    font-style: normal;
   font-weight: normal;
 }
2 Likes

In my case it helps to downgrade packages in the Sage theme!
image|690x346

6 Likes

The Sage 9.x update branch should fix all build-related issues:

and this one

3 Likes

Is this fix required for the Sage 9.x update branch?

I can’t believe this is still not fixed.

You could say, change all your relative paths to absolute paths to fix the issue:

//replace
background-image: url("../assets/images/dummy.svg")
//with
background-image: url("/app/themes/sage/resources/assets/images/svg/dummy.svg")

But the problem is, there’s a lot of npm dependencies out there that also use relative paths. So there’s only one option if you happen to depend on such a npm package, and that is downgrading to sage 9.0.9.

I have created over a dozen sage websites since november, each time I’ve got to downgrade. Is this really so hard to fix?

Have you tried the Sage 9 update branch?

1 Like

Not yet. Since it read “please test” and is not a branch on the official roots/sage repo, I assumed this was not official nor stable.

Update: tested and working, thanks!

It is a PR (actually two of them) that hadn’t been merged yet.
You are of course free to use what you deem “stable” or suitable for your development.

Works great! Thanks for fixing the build.

Thank you. Note for everyone else, do not forget his second post below his first! The first 2 downgrades fixed the relative path issues and png and jpeg worked, but then svg would spit out Object object garble. Downgrading url-loader fixed that.

But it would work without modifications if you use the Sage 9.x update branch?

Plan on it pretty soon once I get the time! I wish that would have been the out of the box one I grabbed with roots/sage.

Hello people, i still have this probleme on my production version projet, and to change the version of

file-loader
url-loader
resolve-url-loader

does not change anything. My url fonts are not recognized. Does anyone have a simple solution, pleassse ?

i read “change the branche of sage 9.X” bu t i don’t know how to do that and what it means exactly !

I am suprise such a major issue has not been solved so far. I really like to work with sage/root.

Thank you for reading

For updating to the Sage 9.1 update branch, please follow this guide
Under Section “Updating an existing Sage 9 theme (quick guide)”: