Activos de rieles: comportamiento extraño de precompilación

Question

Me encontré frente a un comportamiento extraño de la tarea assets:precompile, o al menos frente a algo que no entiendo del todo.

Por lo tanto, estoy utilizando Rails 3.1.3, Sprockets 2.0.3, Less 2.0.11 para mi aplicación web, además confío en Bootstrap para el diseño, por lo que estoy usando también less-rails 2.1.8 y menos -rails-bootstrap 2.0.8. He personalizado el estilo como dicen here.

La configuración de mis activos es:

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

En application.css.scss hago

//=require custom-style 

Y en la costumbre de estilo hago

@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 
//... 

Finalmente en buttons.less Uso algunas variables y mixins definidas en variables.less y mixins.less B archivos Ootstrap, @white y .buttonBackground para ser más específicos.

Si lanzo bundle exec rake assets:precompile con la configuración anterior, la tarea falla y me sale este error:

$ 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 

Pero es que si hago esto cambia

buttons.less --> buttons.css.less 

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

Todo funciona bien !!

¿Está relacionado con el alcance de menos variables y funciones cuando se trabaja con importaciones anidadas? ¿O algo que tiene que ver con la orden, menos analizador, o Sprockets, procesa el árbol de importación?

¿Me falta algo o hago algo de forma incorrecta?

Gracias :)

Nota: me sale el error incluso con las variables originales y los archivos mixins, por lo que no está conectado con las sustituciones realizadas en ellos.

Answer 1

¿Ha intentado cambiar el nombre del archivo a buttons.css.less pero manteniendo la extensión fuera del @import (es decir, @import "buttons")?

Así es como lo hago con SCSS y funciona bien.

Otra idea es reemplazar el //=require custom-style en application.css.less con una directiva @import "custom-style". El Rails Guide here recomienda el uso de @import (que se procesa con SCSS/menos) son más //=require (que se procesa con piñones):

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.

Answer 2

me ocurre una de dos posibilidades en este momento:

1) debería cambiar application.css.scss a application.css.menos y uso:

@import "custom-style";

en lugar de las ruedas dentadas //= require ...

2) El compilador menos es muy fastidioso sobre sus puntos y comas. Me di cuenta de que tiene @import "custom-style/buttons" - debe ser @import "custom-style/buttons";

No sé si el problema es realmente así de simple, pero es un comienzo.

Answer 3

Esto realmente no responde su pregunta, pero ¿es la única razón por la que está mezclando sass y menos para usar twitter bootstrap? Si prefiere usar solo sass, hay algunas gemas bootstrap donde los autores convierten menos a scss, como bootstrap-sass. Antes de perder demasiado tiempo tratando de hacer malabares con ambos en un proyecto, compraría completamente uno o el otro, pero esa es solo mi opinión.