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.