How do I make my LESS variables available for all CSS files in Rails?

Viewed 4174

What I have:

In Rails 3.2.2, I have the following stylesheets:

    app/assets/stylesheets
    |
    |-- application.css
    |-- bootstrap_and_overrides.css.less
    |
    |-- annotations.css.less
    |-- maps.css.less.erb
    `-- users.css.less.erb

The two first ones are more or less system-default. The other ones are where I define my custom styles.

So, application.css, as usual, includes all the other files:

*= require_self
*= require_tree .

And bootstrap_and_overrides.css.less, of course, includes Twitter Bootstrap as well as some other custom defined LESS variables.

@import "twitter/bootstrap/bootstrap";
@import "twitter/bootstrap/responsive";
// other stuff
@brown_text: #332820;

What doesn't work:

Now, in annotations.css.less, I'd like to use @brown_text, but it gives me:

variable @brown_text is undefined

I figure this is because there's no reference from annotations.css.less to the "master" file where the variable would be defined. And it seems that annotations.css.less is compiled first – note that I'm currently in development environment.

So, how can I use my custom LESS variables then, and make them available in other stylesheet files? My current "fix" is to just move all my custom styles into bootstrap_and_overrides.css.less.erb, which doesn't seem very clean at all.

What also doesn't work:

Just importing the LESS files isn't possible, because they use Rails' asset path helpers. And importing an ERB file is also not possible, since the @import statement won't find the file, because it expects a .less suffix.

2 Answers
Related