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

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...

回答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

回答2:

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.

来源：https://stackoverflow.com/questions/33153649/building-bootstrap-with-less-to-change-the-icon-font-path

标签

css

twitter-bootstrap

gulp

bower