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.