# Adding packages with Bower **URL:** https://discourse.roots.io/t/adding-packages-with-bower/3110 **Category:** uncategorized **Created:** 2015-03-05T18:31:40Z **Posts:** 20 ## Post 1 by @launchpad — 2015-03-05T18:31:40Z 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"; ``` --- ## Post 2 by @kalenjohnson — 2015-03-05T19:03:42Z Did you have `gulp watch` running? --- ## Post 3 by @mikespainhower — 2015-03-05T19:09:49Z I’m seeing the same issue. The gulp wiredep task runs after bower install, but main.less is unchanged. --- ## Post 4 by @launchpad — 2015-03-05T19:16:27Z Yeah, gulp watch is running. It happens exactly as mikespainhower describes. So I’m inferring this is likely an issue with that particular package? --- ## Post 5 by @kalenjohnson — 2015-03-05T19:21:45Z The asset builder that is being used relies on [main-bower-files](https://github.com/ck86/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](https://github.com/roots/sage/blob/master/bower.json#L20) --- ## Post 6 by @mikespainhower — 2015-03-05T19:37:19Z 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/*" ] }, ``` --- ## Post 7 by @launchpad — 2015-03-05T19:47:56Z Aha! Great, thank you. --- ## Post 8 by @ben — 2015-03-05T22:01:48Z 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](https://roots.io/screencasts/theme-development-with-gulp-and-bower/)** --- ## Post 9 by @mikespainhower — 2015-03-05T22:24:12Z @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. --- ## Post 10 by @launchpad — 2015-03-06T13:36:49Z 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 --- ## Post 11 by @mZoo — 2015-05-18T18:48:02Z 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" ] } ``` `404`s 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? --- ## Post 12 by @atburi — 2015-10-21T18:57:01Z > [@mZoo](#): > > Initialize it by adding: > > $(‘.single-item’).slick(); > > to assets/scripts/main.js (just below $(document).ready(UTIL.loadEvents);). On a side note, is the way that @mZoo added a custom javascript call the correct way and place to do this in Sage? --- ## Post 13 by @mZoo — 2015-10-22T01:47:22Z 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. ``` --- ## Post 14 by @atburi — 2015-10-22T03:28:43Z 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. --- ## Post 15 by @codaniel — 2015-12-09T21:44:55Z Is gulp supposed to automatically move the font files too? --- ## Post 16 by @sarutole — 2016-05-11T14:44:34Z 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: ```

1

2

3

4

5

6

``` After this, be sure to run `gulp`. And then go see what you have on your site. :wink: --- ## Post 17 by @JackThorp — 2016-06-30T09:18:37Z 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/**/*" ] }, . . . ``` --- ## Post 18 by @smutek — 2016-06-30T18:54:26Z 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. --- ## Post 19 by @sstauross — 2017-01-26T15:22:59Z You can have a look at this answer: [Wrong path for bower plugins with fonts](https://discourse.roots.io/t/wrong-path-for-bower-plugins-with-fonts/6451/2) You should set up the fonts and image paths in your sass files. --- ## Post 20 by @s3w47m88 — 2017-03-24T21:58:20Z 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 "], "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 "], "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/*"] } } }`