Installing bower packages not working correctly

sage
1

Hi there,

I am just starting developing with sage and using package managers. Sorry if i’m “noob-like”
I’ve installed slick-carousel with bower:

bower install slick-carousel --save

I thought it should work properly, but it did not :frowning:
So i’ve added this to my bower.json file as override

Now the carousel works, but i don’t see the dots and arrows… mehhh:(
By the way i correctly used gulp & gulp watch after installing with bower…

The same problem i have with font-awesome
Installed with bower

In my bower.json file my dependencies are changed

And i’ve added this override

"font-awesome": {
"main": [
    "./slick/slick.min.js",
    "./slick/slick.css",
    "./slick/slick-theme.css",
    "./slick/fonts/*"
  ]
}

I only get strange little rectangles… what am i doing wrong?

Greetz! :smiley:

2

You need to tell Slick where to load assets from. Probably covered several times in these forums if you just search for Slick:

https://discourse.roots.io/search?q=slick

3

It also appears you’ve set an override for font awesome and have it pointing to slick folders. That doesn’t seem right.

4

Hi guys, thanks for the reply!

Fontawesome is working now :slight_smile: but there are still some problems with slick-carousel
Changed my override to this

"slick-carousel": {
  "main": [
    "./slick/slick.min.js",
    "./slick/slick.css",
    "./slick/slick-theme.css",
    "./slick/fonts/*"
  ]
}

The carousel works, but the dots, next and prev buttons are not showing. This error i get in my console

Schermafdruk 2016-09-19 13.00.21.png1730×60 25.7 KB

Seems that it wants to get the files from the dist folder… ehm don’t know how to solve this
I already used gulp and gulp watch several times

Greetz and many thanks!

5

I used slick recently and these were my overrides in bower.json:

"slick-carousel": {
  "main": [
    "./slick/slick.js",
    "./slick/slick.scss",
    "./slick/slick-theme.scss",
    "./slick/ajax-loader.gif"
  ]
}

Since you’re using Sage, it makes sense to use the SASS files. You also need to move the ajax-loader over as well so you don’t get a 404.

Also, since you’re already loading Font Awesome, save the load time and use their arrows. I used the following to replace the default Slick font with Font Awesome.

.slick-next:before,
.slick-prev:before {
    font-family: FontAwesome;
}
.slick-prev:before {
    content: "\f0d9"; // http://fontawesome.io/icon/caret-left/
}
.slick-next:before {
    content: "\f0da"; // http://fontawesome.io/icon/caret-right/
}

I’m using the Font Awesome carets, but you can use whatever other icon you want from their library. Just grab the Unicode from the website.

Don’t forget to run gulp before gulp watch so everything builds properly.

6

If you add the fonts to your bower.json overrides then they will be correctly copied to the dist/ dir.