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…
2
Answers
Issue was solved in the Bud 5.1.0.
See this commit https://github.com/roots/sage/commit/c03663602280a5e5bb9caa5c1c4c4b37a40c7395
Use ~@fonts.
Example: