Gebäude Bootstrap mit Less zu ändern @icon-font-path

Benutze ich boostrap mit bower und gulp.

Erste mal, dass ich kopiert die bootstrap.css von der bower_components auf meiner Website dist Ordner und alles seemd zu arbeiten.

Hovever, die ich beobachtet habe, dass ich kein glyphicons. Dies, weil die Schriftarten, halten, dass ich in einem relativ anderen Ordner definiert, dass in bootstrap.css

Ich beobachtet, dass es less Ordner in der bootstrap-Verzeichnis mit der variables.less Datei:

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

OK, vielleicht wenn ich den relativen Pfad in der variables.less nehmen Sie mit gulp die bootstrap.less Ausgabe als css in meinem dist Ordner, es kann funktionieren, aber was ist, wenn ich ein update von bootstrap-dann werde ich verlieren alle meine Modifikationen...

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

Gibt es eine Möglichkeit, überschreiben Sie diesen Wert mit einer benutzerdefinierten Datei mit gulp?

Einschränkungen

Ich will nicht zu ändern Sie eine Datei in der bower_components - Ordner, da Sie ersetzt werden, auf die nächste Laube restore-Vorgang. So kann ich nicht direkt ändern, die bootstrap.less noch variables.less Dateien aus dem bower-Ordner...
Wie die Ordner-Struktur ist die Verwendung von mehreren Modulen, die ich nicht ändern kann die schriftart, Speicherort, um eine Anpassung an die vorhandene CSS-bootstrap-Datei, also mein problem ist die Anpassung die CSS - über die weniger und schlucken, sich nicht zu bewegen, Schriften zu entsprechen, die vorhandenen CSS...

Sie können Ihre eigenen Variablen Datei zu überschreiben die Standardeinstellungen. Meine Struktur ist ein wenig anders als deine, also bin ich nicht sicher, wie Sie Sie zu beraten, auf dass. Es würde gehen, so etwas wie dieses, erstellen Sie eine mysite.variables.less - Datei mit Ihrer benutzerdefinierten Variablen. Dann fügen Sie @import "path/to/mysite.variables.less" zu bootstrap.less oder erstellen Sie eine /css/styles.less - Datei, die hat @import "path/to/vendor/bootstrap.less" und @import "path/to/mysite.variables.less was Sie müssten, um zu zeigen gulp zu.
danke für die Anregung. Ich gab mehr details in einer Antwort Balg!

InformationsquelleAutor Serge | 2015-10-15

Schließlich war ich in der Lage sein zu überschreiben, dass die variable, indem Sie die folgenden:

/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

Den Inhalt myVariables.less:

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

Den Inhalt main.less ist die folgende:

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

Den überschreiben Magie dauert in der Tatsache, dass weniger Variablen faul sind geladen und die neuesten Erklärung/Zuschreibung gewinnt, die andere, wenn die Datei kompiliert wird.

Also die bootstrap-Quellen für die gulp Verarbeitung sind die folgenden:

  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

Artikel zu Lesen :

InformationsquelleAutor Serge

1

Du nicht überschreiben, bootstrap icon-font-path variable hier. Verweisen auf die glyphicons, die in bower_components aus dem stylesheet in dist ist nicht, wie dieses problem behandelt werden soll.

In der Tat, die lokalen Ressourcen, auf die Ihre Anwendung hängt von der eingesetzt werden sollte, um dist, und das schließt glyphicons.

Könnten Sie einen Schluck Aufgabe so kopieren Sie Ressourcen an dist. Hier ist ein Beispiel:
```
gulp.task('copy:resources', function () {
    var glyphiconsGlob = 'bower_components/bootstrap/fonts/*.*';

    return gulp.src(glyphiconsGlob).pipe(gulp.dest(conf.paths.dist + 'css/fonts/'));
});
```
Müssen Sie möglicherweise passen Sie den Pfad in gulp.dest nach, wo die Datei bootstrap.css ist in dist Ordner.
- Ich sehe nicht die Struktur des dist Ordner in der Beschreibung der Frage. Ist die site Ordner, den Ihre dist "Ordner"?
- ja, die Seite ist die dist-Ordner... ich fix den OP
- bei mir ist das problem zu sagen, in CSS, wo soll es die Suche die schriftart, nicht nach der Schrift, wo erwartet wird, in der CSS...
- Mein Punkt ist, dass Sie sehen, dass das problem der falsche Weg ist, und dass die dist Ordner autonom sein sollte: wenn ich es Verpacken und liefern, um jemand, dass man in der Lage sein zu spielen mit meiner Anwendung. Aber trotzdem, Sie haben das Recht, anders zu denken und nicht akzeptieren, die Antwort, ich bin ok mit, dass:)
- Oh, Michael, vielen Dank für den Versuch zu helfen, Ihre Hilfe ist gefragt... Aber ich weiß, wie verschieben von Dateien mit gulp von dir auf andere... Ist mehr kompliziert für mich passen die @icon-font-path variable für meine Bedürfnisse, das ist, warum ich fragte die Experten aus SO...
- übrigens, wenn ich will, pack die Anwendung, die dist Ordner enthält alle Dateien, die ich brauche, so ist autonom für die Verpackung
- Gut, wenn Sie wollen gehen Sie mit der variable überschreiben, es sollte nicht viel von einem problem. Im Grunde genommen import bootstrap.less index-Datei und überschreiben dann die variable.
- Wie genau sollte ich import und überschreiben mit dem Zug?
- gulp ist nicht involviert in diese importieren/überschreiben-Prozess. In einem stylesheet, sagen "Formatvorlagen".weniger import bootstrap.weniger, und nach, dass Sie anpassen icon-font-path. Gulp weniger Aufgabe kompilieren wird Stile.weniger in css.
- "Variablen".weniger mit dem falschen Pfad ist bereits in bootstrap.weniger, so bin ich nicht sicher, wie kann ich anpassen in Stile.weniger
InformationsquelleAutor Michael P. Bazos

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.