Flexslider bower font quandry

$ bower install --save flexslider
$ gulp
FlexSlider bower.json doesn’t include fonts, so I add an override to Sage bower.json
Problem is that Flexslider’s fonts dir is one level below the main css file and that is defined in a LESS stylesheet. So the CSS file doesn’t correctly reference the fonts as …/fonts/ where the fonts are placed by Bower.

What’s the best way to fix this incorrect variable (from Sage’s perspective)? Is there a simple way to override a single LESS variable value and have bower or grunt compile that one change? Otherwise, I’m guess I have to manually synchronize FlexSlider directly into the Sage project.


1 Like

You can override LESS variables if they are in a separate file, and then overwrite those variables before importing the actual LESS stylesheet which uses the variables.

Other than that, since CSS and even pre-processors are still relatively primitive, you can just override the @font-face src style with the correct URL’s, anywhere in your project. That will keep you from having to copy-paste the entire stylesheet to your project.

I considered overriding the @font-face src style in _global.scss but having incorrect font paths remaining in the Flexslider stylesheet was bugging me.

I ended up removing the original Flexslider stylesheet in bower.json:

"flexslider": { "main": [ "jquery.flexslider.js", "./fonts/*" ] }

I then copy-pasted the Flexlider stylesheet to its own Sass file (with font paths corrected) _flexslider.scss and injected that into the main stylesheet via main.scss:

@import "components/flexslider";

Just need to make sure it gets imported before _global.scss if you want to override any of the default styles in there.