3

I built a project on the latest Roots/Sage 10.

I didn't modify the bud.config.js and kept it as I cloned from the sage master branch.

Now I am trying to add a custom font by adding this to the app.css:

@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.ttf?yh9ob") format("truetype"),
    url("../fonts/iconfont.woff?yh9ob") format("woff"),
    url("../fonts/iconfont.svg?yh9ob#baltimore") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

And I added the font files to the resources/fonts folder.

Folder structure:

- resources
|- fonts
|---- iconfont.svg
|---- iconfont.ttf
|---- iconfont.woff
|- images
|- scripts
|- styles
|---- app.css
...

When I run npm run build, it generates the assets files. But the font files are not loading on the site. And when I check the compiled app.[hash].css in the public folder, I can't find anything similar to @font-face.... And I see this at the end of the bud build log:

⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map

When I run npm run dev, it shows the same message, and just hangs there. The assets are even not generated in the public folder other than manifest.json.

% npm run dev

> dev
> bud dev

⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map
⚠ Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: webpack misconfiguration
  webpack or the upstream loader did not supply a source-map

Again, I didn't configure anything on my own and I only have what I pulled from the sage repo's latest commit.

It's a bit frustrating that the sage default setup is not handling this simple style addition.

Does anyone know if I have to configure anything for the custom font definition?

Currently, the root/sage10 documentation is very thin and I can't seek what I need.

Looking for help!

Thanks in advance...

purplefeel
  • 193
  • 2
  • 16

2 Answers2

1

Issue was solved in the Bud 5.1.0.

See this commit https://github.com/roots/sage/commit/c03663602280a5e5bb9caa5c1c4c4b37a40c7395

Dannik
  • 80
  • 7
1

Use ~@fonts.

Example:

src: url(~@fonts/iconfont.ttf?yh9ob) format('truetype')
Daniel Semblano
  • 185
  • 1
  • 7