Including multiple LESS files in rails asset pipeline

Question

So I broke up my LESS files in my rails app (don't ask why I'm using LESS instead of SASS) into a bunch of separate files, based off of what they are meant for.

stylesheets/
├── add-listing.css.less
├── application.css
├── checkout.css.less
├── dashboard-home.css.less
├── edit-listing.css.less
├── edit-profile.css.less
├── global-variables.css.less
├── global.css.less
├── inquiries.css.less
├── inquiry.css.less 
├── manifest.css.less
├── profile-listing.css.less
├── questionnaire.css.less
├── scaffolds.css.less
├── scrape.rb
├── screen.css.less
├── search.css.less
├── settings.css.less
└── sign-up-log-in.css.less

What I've found is that require_tree . doesn't work in application.css . I need to load global-variables.css.less first, and it won't do that. Even when I say require global-variables.css.less it still won't render the actual LESS file needed for the root page.

So what I've been doing is putting @import statements for all the files in manifest.css.less . It works, but that means that if I make a new LESS file, I have to add an @import statement each time. It's just another step, and I was wondering if there was anyway that I could do this with Rails. Any suggestions?

Answer 1

This is not a problem unique to LESS. In SASS, one also has the problem that one cannot ensure the order in which require_tree includes files. If for instance you want to have a variables.scss file that contains a bunch of global SASS variables, you have to remove the require_tree and do this instead in application.css:

/*
 *= require_self
 *= require main
*/

Then this in main.css.scss:

// Import this first so other .scss files can see the variables and the bootstrap stuff
@import "variables";

// @import everything else here. If you add a new file, it won't show up until you add a line to import it here.
@import "style";
@import "tables";
//etc

And yes, it's cumbersome.