Utilizzo della pipeline di asset di Rails 3.1 per utilizzare condizionalmente determinati css

166

Sto costruendo la mia prima app Rails da solo usando Rails 3.1.rc5. Il mio problema è che voglio che il mio sito renda condizionalmente i vari file CSS. Sto usando Blueprint CSS e sto cercando di eseguire il rendering dei pignoni / binari per la screen.cssmaggior parte del tempo, print.csssolo durante la stampa e ie.csssolo quando si accede al sito da Internet Explorer.

Sfortunatamente, il *= require_treecomando predefinito nel application.cssmanifest include tutto nella assets/stylesheetsdirectory e si traduce in uno sgradevole miscuglio CSS. La mia attuale soluzione alternativa è una sorta di metodo della forza bruta in cui specifico tutto individualmente:

In application.css:

*= require_self
*= require home.css
...
*= require blueprint/screen.css

Nei miei fogli di stile parziale (haml):

<!--[if lt IE 9]
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
![endif]-->
= stylesheet_link_tag "application"
= stylesheet_link_tag 'blueprint/print', media: 'print'
<!--[if lt IE8]]
= stylesheet_link_tag 'blueprint/ie'
![endif]-->
= javascript_include_tag "application"

Funziona ma non è particolarmente carino. Ho fatto alcune ore di ricerca per arrivare fino a questo punto, ma spero che ci sia un modo più semplice per farlo che mi sono perso. Se potessi anche rendere selettivamente determinate directory (senza includere le sottodirectory) renderebbe l'intero processo molto meno rigido.

Grazie!

— talon55
fonte

Risposte:

223

Ho scoperto un modo per renderlo meno rigido e a prova di futuro usando ancora la pipeline degli asset ma raggruppando i fogli di stile. Non è molto più semplice della tua soluzione, ma questa soluzione ti consente di aggiungere automaticamente nuovi fogli di stile senza dover modificare nuovamente l'intera struttura.

Quello che vuoi fare è usare file manifest separati per scomporre le cose. Per prima cosa devi riorganizzare la tua app/assets/stylesheetscartella:

app/assets/stylesheets
+-- all
    +-- your_base_stylesheet.css
+-- print
    +-- blueprint
        +-- print.css
    +-- your_print_stylesheet.css
+-- ie
    +-- blueprint
        + ie.css
    +-- your_ie_hacks.css
+-- application-all.css
+-- application-print.css
+-- application-ie.css

Quindi si modificano i tre file manifest:

/**
 * application-all.css
 *
 *= require_self
 *= require_tree ./all
 */

/**
 * application-print.css
 *
 *= require_self
 *= require_tree ./print
 */

/**
 * application-ie.css
 *
 *= require_self
 *= require_tree ./ie
 */

Successivamente aggiorni il file di layout dell'applicazione:

<%= stylesheet_link_tag "application-all", :media => "all" %>
<%= stylesheet_link_tag "application-print", :media => "print" %>

<!--[if lte IE 8]>
    <%= stylesheet_link_tag "application-ie", :media => "all" %>
<![endif]-->

Infine, non dimenticare di includere questi nuovi file manifest nel file config / environment / production.rb:

config.assets.precompile += %w( application-all.css application-print.css application-ie.css )

Aggiornare:

Come ha sottolineato Max, se segui questa struttura devi essere consapevole dei riferimenti alle immagini. Hai alcune scelte:

Sposta le immagini per seguire lo stesso modello
- Nota che questo funziona solo se le immagini non sono tutte condivise
- Mi aspetto che questo sarà un non-inizio per la maggior parte poiché complica troppo le cose
Qualifica il percorso dell'immagine:
- background: url('/assets/image.png');
Usa l'helper SASS:
- background: image-url('image.png');

— gcastro
fonte

Mentre questa è una bella organizzazione dei file, credo che risolva ancora il problema essenziale allo stesso modo della domanda stessa.

— Semperos,

@semperos, hai ragione nel dire che la forma della soluzione è essenzialmente la stessa, ma la mia proposta ci consente ancora di utilizzare la pipeline delle risorse per l'intero foglio di stile. Non sono sicuro se esiste un altro modo per includere selettivamente parte degli stili a meno che non sia su un foglio di stile separato. Almeno in questo modo compiliamo solo una manciata di file CSS.

— gcastro,

Qualcosa del genere nella guida Rails Asset Pipeline sarebbe effettivamente buono. grazie

— Bashar Abdullah

C'è un gotcha però: se segui questa struttura e usi .cssfile semplici , tutte le tue immagini saranno rotte. Ad esempio, background: url('image.png')verrà tradotto nel percorso /assets/all/image.png(attenzione al tutto nel percorso). Invece questo funziona: background: url('/assets/image.png). Se esiste una soluzione più semplice, si prega di pubblicarlo. Oltre all'utilizzo di SASS che ha metodi di aiuto che probabilmente risolvono correttamente il percorso.

— Max

@ExiRe, sì. Eventuali fogli di stile o file JS / manifesti che non seguono la necessità modello standard da aggiungere alla matrice precompilare (vedi: guides.rubyonrails.org/asset_pipeline.html#precompiling-assets )

— gcastro

Oggi ho riscontrato questo problema.

Ho finito per mettere tutti i fogli di stile specifici di IE in lib / assets / stylesheets e creare un file manifest per versione di IE. Quindi in application.rb aggiungili all'elenco di cose da precompilare:

config.assets.precompile += ["ie9.css", "ie7.css", "ie8.css", "ie.css"]

E nei tuoi layout, includi condizionalmente quei file manifest e sei a posto!

— Anthony Alberto
fonte

Questo è un modo abbastanza semplice per farlo. Uso le classi condizionali su html o modernizr. Vedi questo articolo per una buona rappresentazione di cosa fa cosa. Modernizr-vs-condizionali-classi-on-html

— mrmonroe
fonte