Roots Discourse

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?

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

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

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

2 Likes

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

and this one

1 Like

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