When adding packages with Bower, should I need to manually update the main.less or should it happen automatically?
For instance, I ran
bower install --save font-awesome
But nothing was added to main.less in the automatically injected Bower dependencies section.
Once I copied the font files to “fonts” and manually added the following, it worked.
@import "../../bower_components/font-awesome/less/font-awesome.less";Did you have gulp watch running?
I’m seeing the same issue.
The gulp wiredep task runs after bower install, but main.less is unchanged.
Yeah, gulp watch is running. It happens exactly as mikespainhower describes.
So I’m inferring this is likely an issue with that particular package?
The asset builder that is being used relies on main-bower-files and the main keyword of the bower.json file. Font Awesome uses the regular compiled .css file. Since it’s not a .less or .sass file, it won’t be added to the main pre-processor file. It will however be compiled with the final main.css file in the dist folder.
I just installed font-awesome, ran gulp, and it is compiled and working as expected, I can use the fa classes.
If you want to have more control and/or use the pre-processor files, you will need to set up an override in your theme’s bower.json file, similar to how bootstrap.less is being added:
https://github.com/roots/sage/blob/master/bower.json#L20
Thanks for the clarification @kalenjohnson
Adding font-awesome’s assets to the overrides in bower.json does the trick.
"font-awesome": {
"main": [
"./less/font-awesome.less",
"./fonts/*"
]
},Aha! Great, thank you.
FYI, Font Awesome’s bower.json file brings in ./css/font-awesome.css automatically. You do not need to add any sort of overrides to get Font Awesome working out of the box.
main.less will only update @import's for .less files. That doesn’t mean that the font-awesome CSS isn’t included.
PS. This is covered in my screencast on theme dev with gulp + Bower
@benword that’s right - I unintentionally implied that overriding the .css for the .less file was the “fix” to this (when it’s not necessary).
When a package offers a .css file in its bower.json file, the only reason (I think?) that you’d want to override the .css (in favor of the .less/.scss files) is when you want to override variables that are defined in the default source files of the bower component you’re importing.
Understood, and thank you all for the help. I do plan on purchasing the screencasts, especially to try and delve into bedrock once I’m out from under a deadline.
Thanks again,
Dan
Still having a bit of trouble with this. Just getting comfortable with Sage and trying to add slick-carousel as per the tutorial video.
My process:
bower install --save slick-carousel
Initialize it by adding:
$('.single-item').slick();
to assets/scripts/main.js (just below $(document).ready(UTIL.loadEvents);).
Add corresponding HTML in template page.
getting 404’s in console:
NOT FOUND:
full_path_to/wp-content/themes/sage/dist/styles/ajax-loader.gif
full_path_to/wp-content/themes/sage/dist/styles/fonts/slick.woff
full_path_to/wp-content/themes/sage/dist/styles/fonts/slick.ttf
Add an override in sage/bower.json:
"slick-carousel": {
"main": [
"./slick/slick.min.js",
"./slick/fonts/slick.woff"
]
}
404s go away. The js but there’s no slick CSS in dist/styles/main.css
Add this line to the main override:
"./slick/slick-theme.scss"
And the 404 errors are back.
This is really being a head-scratcher for me. Any ideas what’s going on here?
On a side note, is the way that @mZoo added a custom javascript call the correct way and place to do this in Sage?
I never got this carousel working. Was just testing it anyway. I do have a much better understanding of how gulp, bower and asset builder work now, but am by no means an expert.
But I think the correct place to initialize a script, at least if it’s going to be initialized as part of main.js (as opposed to maybe rendered in a different file that would only be loaded on specific pages) would be just before the closing of the jQuery no conflict block:
........more stuff here....
$(document).ready(function(){
$('.bxslider').bxSlider();
});
$("#share").jsSocials({
shares: ["email", "twitter", "facebook", "googleplus", "linkedin", "pinterest"]
});
})(jQuery); // Fully reference jQuery after this point.Thanks, @mZoo. That’s what I was wondering. I tried it after the JQuery reference and it didn’t seem to work, so I’ll give this a shot.
Is gulp supposed to automatically move the font files too?
Add slick as a dependency in Sage’s bower.js:
"dependencies": {
"slick-carousel": "~1.6.0",
...
Then add this to the overrides section in Sage’s bower.js:
"overrides":{
"slick-carousel": {
"main": [
"./slick/slick.min.js",
"./slick/slick.css",
"./slick/slick-theme.css",
"./slick/fonts/*"
]
}
...
(After this step be sure to run bower update.)
Be sure to have these lines in your manifest.js:
{
"dependencies": {
"main.js": {
"bower": ["slick-carousel"],
"files": [
"scripts/main.js"
],
"main": true
},
"main.css": {
"bower": ["slick-carousel"],
"files": [
"styles/main.scss"
],
"main": true
},
then of course you need to call Slick from inside your main.js:
var Sage = {
// All pages
'common': {
init: function() {
// JavaScript to be fired on all pages
$('.slick-carousel').slick();
},
finalize: function() {
// JavaScript to be fired on all pages, after page specific JS is fired
}
},
To see Slick it in action, add some markup to one of your templates:
<div class="slick-carousel" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
After this, be sure to run gulp. And then go see what you have on your site. 
I ran into the fontawesome problem so I bought the screencast and followed along. I installed fontawesome 4.6.3 and it seems its bower.json has changed to:
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss"
],
Therefore, I don’t think simply installing with bower and then running gulp is enough anymore. I managed to get fontawesome working by adding the following override:
"overrides": {
"font-awesome": {
"main": [
"scss/font-awesome.scss",
"fonts/**/*"
]
},
. . .
FWIW, I use Font Awesome & Slick on pretty much every project. Slick is just so fast to implement and easy to use.
Here’s my override -
"overrides": {
"slick-carousel": {
"main": [
"./slick/slick.js",
"./slick/slick.css"
]
},
"font-awesome": {
"main": [
"./scss/font-awesome.scss",
"./fonts/*"
]
},
I skip the slick theme and fonts, then I’ll copy over the slick theme .scss to my project, I usually call it “sliderbase” or something like that, and tweak it to fit my project.
Since I’m using Font Awesome I just swap that in via the variables so I don’t have to worry about loading the slick fonts.
For example -
$slick-font-family: "FontAwesome";
$slick-prev-character: "\f060";
$slick-next-character: "\f061";
$slick-dot-character: "\f192";
Works pretty well for me.
You can have a look at this answer: Wrong path for bower plugins with fonts
You should set up the fonts and image paths in your sass files.
I’m new to Sage and having read this thread I believe I understand the issue but when I edit my Bower. json file I’m getting errors. I believe it’s because I’m putting the config details in the wrong lines but I can’t figure out for sure. Can anyone enlighten me?
I tried this:
{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <ben@benword.com>" ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6", }, "overrides": { "font-awesome": { "main": [ "./less/font-awesome.less", "./fonts/*" ] }, } }
And this:
{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <ben@benword.com>" ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6", "font-awesome": { "main": [ "./less/font-awesome.less", "./fonts/*" ] } } }