Css 使用更少的资源构建引导以更改@icon字体路径

我将boostrap与

bower

和

gulp

一起使用

第一次，我把

bootstrap.css

从

bower_组件

复制到我网站的

dist

文件夹，一切看起来都正常

我曾经观察到我没有

字形图标

。这是因为字体，我保存在一个相对的文件夹中，而不是在

bootstrap.css

我注意到引导目录中有

less

文件夹，其中包含

变量。less

文件：

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

好的，也许如果我在

变量.less

中更改相对路径，将

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

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

限制

• 我不想更改

  bower\u components

  文件夹中的任何文件，因为它们将在下一次bower restore操作中被替换。因此，我无法直接修改bower文件夹中的

  bootstrap.less

  或

  变量.less

  文件
• 由于文件夹结构由多个模块使用，我无法更改字体位置以使其适应现有CSS引导文件，因此我的问题是通过less和gulp来适应CSS，而不是移动字体以对应现有CSS

---

您不必在此处覆盖引导

图标字体路径

变量。从

dist

中的样式表中引用

bower\u组件中的glyph图标不是处理此问题的方法

事实上，应用程序所依赖的本地资源应该部署到
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
中的路径。
最后，我可以通过执行以下操作来覆盖该变量：

/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';

覆盖魔法持续的事实是，在编译文件时，最新的声明/属性将赢得其他声明/属性

因此，
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

文章内容如下：




您可以创建自己的变量文件以覆盖默认变量。我的结构和你的有点不同，所以我不知道如何提供建议。它会像这样，创建一个带有自定义变量的
mysite.variables.less
文件。然后将
@import“path/to/mysite.variables.less”
添加到
bootstrap.less
或创建一个
/css/styles.less
文件，该文件具有
@import”路径/to/vendor/bootstrap.less”
和
@import“path/to/mysite.variables.less
，您必须将gulp指向它。@hungerstar，谢谢您的建议。我在下面的回答中给出了更多的细节！我在问题描述中没有看到
dist
文件夹的结构。
站点
文件夹是您的dist文件夹吗？是的，站点是dist文件夹。。。我会解决这个问题。对我来说，问题是告诉CSS它应该在哪里搜索字体，而不是将字体移动到CSS中预期的位置……我的观点是，你以错误的方式看待问题，并且
dist
文件夹应该是自治的：如果我打包并交付给某人，该人应该能够使用我的应用程序。但不管怎样，你有权不接受答案，我同意：）哦，迈克尔，谢谢你的帮助，非常感谢你的帮助。。。但我知道如何将文件从一个目录移动到另一个目录。。。对于我来说，根据我的需要调整
@icon font path
变量更为复杂，这就是为什么我要求来自SO的专家。。。