Wie integriert man eine (statische) Bootstrap-Vorlage in die Ressourcen-Pipeline?

Question

Ich mache eine Homepage mit twitter bootstrap, rails 3.2.1 und twitter-bootstrap-rails gem (https://github.com/seyhunak/twitter-bootstrap-rails).

Ich wollte ein anderes Aussehen als das klassische twitter ausprobieren und fand eine großartige Vorlage namens "United" von bootswatch.com.

Ich habe vier Dateien heruntergeladen (bootstrap.css/bootstrap.min.css/variables.less/bootswatch.less).

Wie kann ich diese Dateien in die Asset-Pipeline einbinden?

Hier ist die Auflistung aus meinem 'app/assets' Verzeichnis (die Dateien werden von twitter-bootstrap-rails gem generiert).

/images/rails.png 
/javascripts/application.js 
/javascripts/bootstrap.js.coffee 
/javascripts/products.js.coffee 
/stylesheets/application.css 
/stylesheets/bootstrap_and_overrides.css.less 

Ich habe keine Ahnung. Auch

Answer 1

Wenn Sie auf dem System installieren überprüfen von bootswatch Sie müssen nur die bootstrap.min Download in Website benötigen, so fügen Sie es in Ihrem application.css

//= require bootstrap.min.css 

Sie können alle Bootstrap-Anforderung löschen.

Answer 2

Ich benutze das gleiche Juwel (Bootstrap-Sass-Schienen) und manchmal lade ich benutzerdefinierte Themen von Bootswatch. Mein Ansatz ist ziemlich einfach:

• ich nur die variables.less-Datei herunterladen, überprüfe ich, welche Variablen ich brauche (Farben, Schriftarten, etc ..), dann wandle ich sie SCSS Syntax

• Nachdem die Variablen oben definiert sind, verwende ich SCSS Syntax (anstelle von // = erfordern) Bootstrap-Komponenten erfordern

hier (Sie in der Regel nicht das Bündel alle brauchen) ist ein kurzes Beispiel:

// Navbar 
$navbarBackground:    #DD4814; 
$navbarBackgroundHighlight:  #CE4213; 
// other vars... 

@import "twitter/bootstrap/variables"; 
@import "twitter/bootstrap/mixins"; 
@import "twitter/bootstrap/reset"; 
@import "twitter/bootstrap/scaffolding"; 
@import "twitter/bootstrap/grid"; 
@import "twitter/bootstrap/layouts"; 
// etc... 

Auf diese Weise enden Sie mit einem kleineren CSS und mehr Möglichkeiten, es anzupassen.

Answer 3

Dieses Juwel weniger verwendet als gut, aber wurde nach Maß twitter Bootstrap-Vorlagen erleichtern die Integration:

https://github.com/scottvrosenthal/twitter-bootswatch-rails