Question

I’m using less css along with twitter-bootstrap-rails in an app and I can’t figure out how to create my own custom less variables. I created a file called stylesheets/globals/variables.css.less that I’d like to use to define a custom color palette in.

I tried importing that file into other stylesheets where I want to use custom color variables but I keep getting an undefined variable error.

There’s no issue with bringing variables over from the twitter-bootstrap rails gem. For instance @import “twitter/bootstrap/bootstrap”; in the booststrap_and_overrides.css.less file works just fine.

The only way to fix this is to run rake assets:precompile, but that’s not a workable solution. Is there a way to use the variables at runtime?

Answer 1

I believe I ran into a similar problem. I fixed the problem by renaming my custom variable file to:

my_custom_variables.less

and adding:

@import "my_custom_variables";

to the top of the CSS file referencing my custom variables.