Question

我在bower和gulp使用了boostrap。

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

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

中定义的其他相对文件夹中

我发现bootstrap目录中有less个文件夹，其中包含variables.less文件：

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

好的，也许如果我在variables.less中更改了相对路径，请将bootstrap.less与gulp一起输出并输出为dist文件夹中的css，它可能会有效，但如果我更新bootstrap然后我将失去所有修改......

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

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

限制

我不想更改bower_components文件夹中的任何文件，因为它们将在下一次的投标恢复操作中被替换。因此，我无法直接修改bower文件夹中的bootstrap.less和variables.less文件...
由于该文件夹结构由多个模块使用，我无法更改字体位置以使其适应现有的CSS引导程序文件，因此我的问题是通过以下方式调整 CSS less和gulp，不要移动字体以对应现有的CSS ...

Answer 1

最后，我可以通过以下方式覆盖该变量：

/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

阅读文章：

Answer 2

您不必在此处覆盖bootstrap icon-font-path变量。从bower_components中的样式表引用dist中的字形，不是应该如何处理此问题。

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

您可以执行gulp任务，以便将资源复制到dist。这是一个例子：

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

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

您可能需要根据文件gulp.dest在bootstrap.css文件夹中的位置调整dist中的路径。

使用Less构建Bootstrap以更改@ icon-font-path

2 个答案: