2012-03-17 12 views
9

Mi sono trovato di fronte a uno strano comportamento dell'attività assets:precompile o almeno di fronte a qualcosa che non comprendo completamente.Rails assets: comportamento anomalo precompilato

Quindi, sto usando Rails 3.1.3, Sprockets 2.0.3, meno 2.0.11 per la mia applicazione web, inoltre mi affido a Bootstrap per il layout, quindi sto utilizzando anche meno-rail 2.1.8 e meno -rails-bootstrap 2.0.8. Ho personalizzato lo stile come dicono here.

La configurazione del mio patrimonio è:

stylesheets 
|--application.css.scss 
|--custom-style/ 
    |--variables.less 
    |--mixins.less 
    |--buttons.less 
|--custom-style.css.less 

In application.css.scss faccio

//=require custom-style 

E in costume in stile faccio

@import "twitter/bootstrap/reset"; 
//@import "twitter/bootstrap/variables"; // Modify this for custom colors, font-sizes, etc 
@import "custom-style/variables"; 
//@import "twitter/bootstrap/mixins"; 
@import "custom-style/mixins"; 
// And all the other standar twitter/bootstrap imports... 

// Other custom-style files to import 
@import "custom-style/buttons" 
//... 

// And other rules here 
//... 

Infine nel buttons.less Uso alcune variabili e mixin definiti nello variables.less e mixins.less B file ootstrap, @white e .buttonBackground per essere più specifici.

Se io lancio bundle exec rake assets:precompile con la configurazione di cui sopra, l'operazione non riesce e ottengo questo errore:

$ bundle exec rake assets:precompile 
/usr/local/rvm/rubies/ruby-1.9.3-p0/bin/ruby /usr/local/rvm/gems/ruby-1.9.3-p0/bin/rake assets:precompile:all RAILS_ENV=production RAILS_GROUPS=assets 
rake aborted! 
.buttonBackground is undefined 

Ma è che se faccio questo cambia

buttons.less --> buttons.css.less 

@import "buttons" --> @import "buttons.css.less" 

Tutto funziona benissimo !!

È qualcosa che riguarda lo scopo di meno variabili e funzioni quando si lavora con importazioni nidificate? O qualcosa che ha a che fare con l'ordine, meno parser, o Sprockets, elabora l'albero di importazione?

Mi manca qualcosa o faccio qualcosa nel modo sbagliato?

Grazie :)

Nota: ottengo l'errore anche con le variabili originali e file mixin, quindi non è collegata con le sostituzioni fatte in loro.

+2

"Mi sono ritrovato di fronte a uno strano comportamento delle risorse: compito precompilato" - non ci siamo tutti :) mi sembra anche che il mix di application.css.scss e dei file .less possa essere un problema. Proverei/LESS/SASS e forse Sass non riconosce le tue direttive @import. Non è necessario, quindi cambia application.css.scss -> application.css, rimuovi i sass-rail da Gemfile e verifica se è d'aiuto. Buona fortuna :) – sbeam

risposta

0

Hai provato a rinominare il file in buttons.css.less ma mantenendo l'estensione su @import (ad esempio, @import "buttons")?

Ecco come lo faccio con SCSS e funziona perfettamente.

Un'altra idea è di sostituire //=require custom-style in application.css.less con una direttiva @import "custom-style". Il Rails Guide here raccomanda utilizzando @import (che viene elaborato con SCSS/LESS) sono oltre //=require (che viene elaborato con Sprockets):

If you want to use multiple Sass files, you should generally use the Sass @import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.

+0

"@import" i pulsanti "' non funziona, questo perché l'interprete LESS cerca un file '.less' e non per un' .css.less' – mokagio

+0

Puoi per favore collegarmi ** in qualche luogo * *? Per quanto ne so, // = require' è come dovresti parlare con Sprockets ... – mokagio

+0

Qui: http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives - box giallo a un po ', lo inserirò nella risposta. –

1

mi viene in mente una delle due possibilità in questo momento:

1) dovrebbe cambiare application.css.scss in application.css.meno ed impiego:

@import "custom-style";

posto dei pignoni //= require ...

2) Il compilatore meno è molto esigente riguardo suoi virgola. Ho notato che hai @import "custom-style/buttons" - dovrebbe essere @import "custom-style/buttons";

Non so se il problema è davvero così semplice, ma è un inizio.

0

Questo in realtà non risponde alla tua domanda, ma è l'unico motivo per cui stai mescolando sass e meno per usare il bootstrap di Twitter? Se preferisci usare solo sass, ci sono alcune gemme bootstrap in cui gli autori convertono il meno in scss, come bootstrap-sass. Prima di sprecare troppo tempo cercando di destreggiarmi entrambi in un progetto, mi compro completamente nell'uno o nell'altro, ma questa è solo la mia opinione.

Problemi correlati