Building Bootstrap with Less to change the @icon-font-path

Question

I use boostrap with bower and gulp.

First time I copied the bootstrap.css from the bower_components to my site's dist folder and everything seemd to work.

Hovever I observed that I have no glyphicons. This because of the fonts, that I keep in a relative folder other that defined in bootstrap.css

I observed that there is less folder in bootstrap directory having the variables.less file:

//** Load fonts from this directory.
@icon-font-path:          "../fonts/";

OK, perhaps if I change that relative path in the variables.less, take with gulp the bootstrap.less and output as css in my dist folder, it may work, but what if I update bootstrap then I will loose all my modifications...

bower_components
-- bootstrap   
---- less 
------ bootstrap.less
------ variables.less // @icon-font-path = "../fonts/"
------ ... 
---- fonts
------ glyphicons.ttf // etc 

dist
-- css
---- bootstrap
------ bootstrap.css // here I need @icon-font-path = "../../fonts/bootstrap/"
-- fonts
---- bootstrap
------ glyphicons.ttf // etc

Is there a way to override that value with a custom file with gulp?

Restrictions

• I don't want to change any file in the bower_components folder because they will be replaced on the next bower restore operation. So I can't modify directly the bootstrap.less nor variables.less files from the bower folder...
• As that folder structure is used by multiple modules, I can't change the font location to adapt it to the existing CSS bootstrap file, so my problem is to adapt the CSS via the less and gulp, not to move fonts to correspond to the existing CSS...

Answer 1

Finally I was be able to override that variable by doing the follwing:

/bower_components
--/bootstrap
----/less
------/boostrap.less
------/variables.less
----/fonts
------/glyp..etc..ttf

/dev
--/bootstrap
----/main.less
----/myVariables.less

/dist
--/bootstrap
----/bootstrap[.min].css
--/fonts
----/bootstrap
------/glyp..etc...ttf

The content of myVariables.less:

//** Load Bootsrap fonts from this directory.
@icon-font-path:          "../../fonts/bootstrap/";

The content of main.less is the folowing:

@import '../../../bower_components/bootstrap/less/bootstrap.less';
// override boostrap variables
@import 'variables.less';

The override magic lasts in the fact that less variables are lazy loaded and the latest declaration/attribution wins the others when the file is compiled.

So the bootstrap sources for the gulp processing are the following:

  css:   devFolder + '/bootstrap/main.less'            // compile/minimize to css
fonts: bowerFolder + '/bootstrap/dist/fonts/*.*'       // copy to dist
   js: bowerFolder + '/bootstrap/dist/js/bootstrap.js' // minimize to dist

Articles to read :

• Adding Less to our build
• LESS lazy loading