I am curious if there is a best standards to including items like Font Awesome with the new version of Sage using Bower + Gulp? Having a bit of trouble getting the font files to load.
So as more packages moving forward fall in line with Bower spec, we should require less overrides, except for those packages where we need images or fonts, in that case we will still need to set up overrides to pull those files into the dist folder.
Having a bit of a time trying to get Fontawesome to work. Ran into this post and the link above on github talking about overriding. I’m not sure I am understanding it correctly. Below is one of my iterations. I did several! Some direction would be great as I have spent the last hour trying to get this to work. Nothing is showing up. I did run through the normal “bower install --save fontawesome” . Thanks.
Yeah, so I got it to work. I was just totally focused on a different file. Anyways, still needed to do the override for Fontawesome. Just an FYI for others that wonder why it doesn’t work through the normal process.
In the sage book the example is (same as override)
"main": [
"./css/font-awesome.css",
"./fonts/*"
]
I understand the override makes this work, but I don’t understand why the fontawesome bower file is the way it is and why it changed. How come the fontawesome bower file doesn’t have the line for fonts anymore?
Im new to Bower so this one has thrown me. I think I’m getting used to the principles and have successfully added font-awesome but am unsure which bower.json file I need to amend to get gulp to transfer the font files to the dist folder (I assume that is the expected result, looking at the css added to main.cc).
As @kalenjohnson suggested the gulp && gulp watch command is important. In other words, if you just stop gulp and the run gulp watch the fonts doesn’t get copied to your theme “dist/fonts/” folder.
So the process that worked for me is (notice the hyphen added in “font-awesome”):
After much research, I finally figured this out. Had to remove my previous two posts… my apologies for any over-posting this may have caused. Final answer is this.
I was having trouble locating where to put the snippet of code to override the default functionality. I had added the text to every freaking bower.json in my entire theme structure and still couldn’t get the fonts folder to pull into the dist directory. Then it hit me…
Here’s what my main theme bower.json file now looks like. File located at the root of the theme itself:
How would this work in Sage 9 with Webpack?
Because I’m getting errors on npm run build:production:
ERROR in ./styles/main.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff2 in /path/to/my/project/site/web/app/themes/sage/assets/styles
In my main.scss I import font-awesome like this:
@import "~font-awesome/scss/font-awesome";
I need to copy the font files over to my assets I guess?