Sage 9 Font Issue : resolve-url-loader

[petemattx]

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

[joemoses]

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]

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

Sage 9 - Fonts not in dist/fonts/ after build

Just reporting back. I pulled down the 9.0.9 release. Unzipped, had to run composer update and there are quite a few issues with dependencies, but with when I change it to use "node-sass": "~4.12.0", I can run npm install. When I run npm run build, it builds with no issues. I can see this in the main.css file: @font-face { font-family: "SocialIcons"; src: url(data:application/font-woff;base64,d09GRgABAAAAAA2UA...) format("woff"); font-weight: normal; font-style: normal; font-display…

I hope they can fix the sage v9.0.10 soon

[mindoza]

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]

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]

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]

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

[strarsis]

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

Sage "9.1": Please test

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 setup…

[AlZhukouski]

and this one

[strarsis]

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

[Jan-Klaas]

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]

Have you tried the Sage 9 update branch?

Sage "9.1": Please test

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 setup…

[Jan-Klaas]

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]

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]

Works great! Thanks for fixing the build.

[t5963]

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]

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

[t5963]

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]

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]

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

Sage "9.1": Please test

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 setup…