CODEWITHSUNDEEP
csstwitter-bootstrapgulpbower
serge
serge

Reputation: 15229

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

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

Upvotes: 4

Views: 7632

Answers (2)

serge
serge

Reputation: 15229

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 :

Upvotes: 6

Michel
Michel

Reputation: 28269

You don't have to override bootstrap icon-font-path variable here. Referencing the glyphicons, that are in bower_components, from the stylesheet in dist is not how this problem should be handled.

In fact, the local resources on which your application depends should be deployed to dist, and that includes glyphicons.

You could make a gulp task so as to copy resources to dist. Here is an example:

gulp.task('copy:resources', function () {
    var glyphiconsGlob = 'bower_components/bootstrap/fonts/*.*';

    return gulp.src(glyphiconsGlob).pipe(gulp.dest(conf.paths.dist + 'css/fonts/'));
});

You might have to adapt the path in gulp.dest according to where the file bootstrap.css is in dist folder.

Upvotes: 1

Related Questions