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

Question

我将 boostrap 与bower和一起使用gulp。

我第一次复制bootstrap.css从bower_components我的站点的dist文件夹，一切seemd工作。

但是我观察到我没有glyphicons。这是因为字体，我保存在一个相对文件夹中bootstrap.css

我观察到lessbootstrap 目录中有一个variables.less文件夹包含该文件：

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

好的，也许如果我更改variables.less.gulp 中的相对路径，bootstrap.less并在我的dist文件夹中将其作为 css 输出，它可能会起作用，但是如果我更新引导程序，那么我将丢失所有修改...

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 引导文件，所以我的问题是通过 less 和 gulp来适应CSS，而不是移动字体以对应于现有的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

阅读文章：

• 在我们的构建中添加更少
• 少延迟加载