構建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以減少更改@圖標字體路徑

回答

相關問題