Sage 9 Font Issue : resolve-url-loader

petemattx · November 23, 2020, 10:40am

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:

Added font ( .ttf ) to resources/assets/fonts
Created _fonts.scss to resources/assets/styles/common
Inside _fonts.scss
@font-face {
font-family: “BigCaslon”;
src: url("…/…/fonts/BigCaslon.ttf") format(“truetype”);
font-weight: normal;
font-style: normal;
}
Imported in main.scss “@import “common/fonts”;” but never used the font yet
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

joemoses · November 26, 2020, 12:20pm

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?

petemattx · November 26, 2020, 1:24pm

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

mindoza · November 30, 2020, 12:02am

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.

MikeFishtank · February 22, 2021, 12:31pm

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;
}

MikeFishtank · February 22, 2021, 12:44pm

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;
 }

AlZhukouski · March 19, 2021, 9:49am

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

strarsis · March 19, 2021, 11:08am

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

e class='quote' data-post="1" data-topic="20067">

Sage "9.1": Please test sage

Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…

AlZhukouski · March 25, 2021, 2:19pm

and this one

strarsis · March 25, 2021, 2:24pm

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

Jan-Klaas · May 19, 2021, 11:34am

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?

strarsis · May 19, 2021, 11:35am

Have you tried the Sage 9 update branch?

e class='quote' data-post="1" data-topic="20067">

Sage "9.1": Please test sage

Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…

Jan-Klaas · May 19, 2021, 11:46am

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!

strarsis · May 19, 2021, 12:43pm

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.

diomededavid · May 20, 2021, 1:31pm

Works great! Thanks for fixing the build.

t5963 · June 2, 2021, 1:35pm

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.

strarsis · June 2, 2021, 1:42pm

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

t5963 · July 22, 2021, 4:57pm

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.

itIsinspiring · August 31, 2021, 2:33pm

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

strarsis · August 31, 2021, 5:28pm

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

e class='quote' data-post="1" data-topic="20067">

Sage "9.1": Please test sage

Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…