CODEWITHSUNDEEP
ruby-on-railstwitter-bootstraplesssprockets
mokagio
mokagio

Reputation: 17481

Rails assets:precompile strange behavior

I found myself in front of a strange behavior of the assets:precompile task, or at least in front of something I don't fully understand.

So, I am using Rails 3.1.3, Sprockets 2.0.3, Less 2.0.11 for my web application, plus I rely on Bootstrap for the layout, so I am using also less-rails 2.1.8 and less-rails-bootstrap 2.0.8. I have customized the style like they say here.

The configuration of my assets is:

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

In application.css.scss I do

//=require custom-style

And in custom-style I do

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

Finally in buttons.less I use some variables and mixins defined in the variables.less and mixins.less Bootstrap files, @white and .buttonBackground to be more specifc.

If I launch bundle exec rake assets:precompile with the above configuration, the task fails and I get this 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

But is that if I do this changes

buttons.less --> buttons.css.less

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

Everything works fine!!

Is it something related to the scope of less variables and functions when working with nested imports? Or something that has to do with the order the less parser, or Sprockets, processes the import tree?

Am I missing something or doing something in the wrong way?

Thanks :)

Note: I get the error even with the original variables and mixins files, so it's not connected with the overrides done into them.

Upvotes: 9

Views: 1426

Answers (3)

Brandon
Brandon

Reputation: 686

This doesn't really answer your question, but is the only reason you are mixing sass and less to use twitter bootstrap? If you prefer to use just sass, there are some bootstrap gems where the authors convert the less to scss, like bootstrap-sass. Before I wasted too much time trying to juggle both in a project, I'd completely buy into one or the other, but that's just my opinion.

Upvotes: 0

wisew
wisew

Reputation: 2892

I can think of one of two possibilities right now:

1) You should change application.css.scss to application.css.less and use:

@import "custom-style";

instead of the sprockets //= require ...

2) The LESS compiler is very finicky about its semicolons. I noticed that you have @import "custom-style/buttons" - it should be @import "custom-style/buttons";

Dunno if the issue is really that simple, but it's a start.

Upvotes: 1

Luke Abbott
Luke Abbott

Reputation: 455

Have you tried renaming the file to buttons.css.less but keeping the extension off the @import (i.e., @import "buttons")?

That's how I do it with SCSS and it works fine.

Another thought is to replace the //=require custom-style in application.css.less with an @import "custom-style" directive. The Rails Guide here recommends using @import (which is processed with SCSS/LESS) are over //=require (which is processed with 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.

Upvotes: 0

Related Questions