Ich benutze Rails 3 zum ersten Mal (insbesondere Asset-Pipelining und weniger-Rails-Bootstrap), so dass ich hier ein wirklich grundlegendes Konzept vermisse. Ich habe zwei Ansätze ausprobiert, um das Twitter-Bootstrap-CSS in mein Projekt aufzunehmen, und beide haben Probleme.
Vorgehensweise # 1: app/assets/stylesheets/application.css hat require twitter/bootstrap . Dies beinhaltet die Bootstrap-CSS-Datei mit einem separaten Link / href-Tag, was gut ist. Das Problem ist jedoch, dass in meiner benutzerdefinierten CSS-Datei app/stylesheets/mystyles.css nicht auf Variablen und Mixins zugreifen kann, die weniger im Bootstrap-Code definiert sind, wie @gray , .box-shadow usw.
Ansatz Nr. 2: Setzen Sie @import 'twitter/bootstrap' an der Spitze von app/assets/stylesheets/mystyles.css . Dadurch kann ich auf Variablen + Mixins zugreifen, die in weniger (innerhalb des Bootstrap-Codes) definiert sind, was gut ist. Das Problem besteht jedoch darin, dass das gesamte Bootstrap-CSS am oberen Rand von mystyles.css eingefügt wird, wodurch die Dateigröße erhöht wird. Wenn es eine Menge verschiedener Stylesheets gibt, die @import twitter/ bootstrap enthalten, würde dies zu vielen Duplizierungen führen.
Was ist der empfohlene Ansatz zum Umgang mit dieser Situation?
Ihre Antwort ist ausreichend, wenn Sie ausschließlich die standardmäßigen Twitter-Bootstrap-Variablen verwenden möchten. Wenn Sie möchten, dass die Variablen überschrieben und auf BEIDE twitter-Bootstrap-Stile und Ihre eigenen Stile angewendet werden, müssen Sie Ihre Variablen in eine eigene Datei myvariables.less aufteilen und diese Datei in Twitter-Bootstrap anstelle von enthalten im Manifest.
application.css:
%Vor%bootstrap_and_overrides.less:
%Vor%mystyles.less:
%Vor%myvariables.less:
%Vor%Ich habe einen möglichen Weg gefunden, dies zu tun, ohne zu (zu viel) Wiederholung von CSS-Code zu führen.
application.css
%Vor%mystyles.css
%Vor%Tags und Links ruby-on-rails-3 twitter-bootstrap