构建Bootstrap以减少更改@图标字体路径

我使用助推器bower和gulp。构建Bootstrap以减少更改@图标字体路径

我第一次将bootstrap.css从bower_components复制到我的网站的dist文件夹，似乎一切正常。

Hovever我发现我没有glyphicons。这是因为字体，我保持在bootstrap.css

定义我观察到，是具有variables.less文件中的引导目录less文件夹之外的相关文件夹：

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

OK，也许如果我改变在variables.less是相对路径，采取与一饮而尽的bootstrap.less和输出的CSS在我dist文件夹，它可能工作，但如果我更新引导然后我将失去我的所有修改...

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

有没有办法用自定义文件来覆盖该值？

限制

我不想改变任何文件中的文件夹bower_components，因为他们将在接下来的凉亭被替换恢复操作。所以我不能直接修改bower文件夹中的bootstrap.less和variables.less文件...
由于该文件夹结构被多个模块使用，我无法更改字体位置以使其适应现有的CSS引导程序文件，所以我的问题是通过较少的适应的CSS和大口喝，不要动字体对应于现有的CSS ...

来源

2015-10-15 Serge

您可以创建自己的变量文件覆盖默认的。我的结构与你的结构有点不同，所以我不确定如何提供建议。它会像这样，用你的自定义变量创建一个'mysite.variables.less'文件。然后将'@import'path/to/mysite.variables.less''添加到'bootstrap.less'或者创建一个'@import'path/to/vendor/bootstrap.less'/ css/styles.less'文件“'和'@import”path/to/mysite.variables.less'你必须指向一点点。 – hungerstar

@hungerstar，谢谢你的建议。我在回答下面给出了更多细节！ – Serge

最后我能这样做，以覆盖该变量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

的myVariables.less内容：

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

的main.less内容是如下因素：

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

覆盖魔法持续时间为less variables are lazy loaded和最新声明/归因在文件编译时赢得其他声明。

为gulp处理，引导来源有以下几种：

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

文章阅读：

来源

2015-10-16 13:46:29 Serge

你不必在这里重写引导icon-font-path变量。从dist中的样式表中引用bower_components中的图标不是应该如何处理这个问题。

实际上，应用程序所依赖的本地资源应该部署到dist，其中包括glyphicons。

您可以制作一个吞咽任务，以便将资源复制到dist。这里有一个例子：

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

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

您可能必须根据该文件bootstrap.css是dist文件夹中gulp.dest适应的路径。

来源

2015-10-15 22:44:15

我没有请参阅问题描述中'dist'文件夹的结构。'site'文件夹是您的* dist *文件夹吗？ –

是的，该网站是dist文件夹...我将修复OP – Serge

对我的问题对CSS来说，它应该在哪里搜索字体，而不是将字体移动到CSS所期望的位置...... – Serge

构建Bootstrap以减少更改@图标字体路径

回答

相关问题