$ 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.
Thoughts?
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.