@import directory statement in less

Question

My less organization right now is as follows:

styles/pages/page1/index.less
styles/pages/page1/tab1.less
...
styles/widgets/widget1.less
styles/widgets/widget2.less
...
styles/tools/partials.less
...
styles/app.less

The entirety of my app.less file are @import statements to bring all the other parts in.

@import "tools/partials";
@import "widgets/widget1";
@import "widgets/widget2";
@import "pages/page1/index";
@import "pages/page1/tab1";
//...

These statements are maintained manually, which sucks. Is there a better way?

I'm dreaming of something like this:

@import "tools/partials";
@import "widgets/*";
@import "pages/**/*";

Maybe some kind of script to handle this on the editor level (using WebStorm)? Or perhaps some kind of plugin for the less compiler itself?

Right now I'm serving less files from an express middleware in my app, but I can easily switch to grunt if there's a solution there.

Answer 1

Take a look at grunt-less-imports. It maintains an imports file based on your files (app.less in your case).

Here is how I use it in my recent project. I have a bunch of less files, like so:

And I use grunt-less-imports like so (gruntfile.js):

less_imports: {
        options: {
            banner: '// Compiled stylesheet'
        },
        styles: {
            src: ['<%= config.app %>/assets/less/**/*.less', '!<%= config.app %>/assets/less/styles.less'],
            dest: '<%= config.app %>/assets/less/styles.less'
        }
    },

This task make a styles.less with imports:

So you just add-delete your less files, and task do the job importing them. Is it what you looking for?

Update

If you need more structure in your imports file, you can get some. For example, i have two folders with less files, page-frame-blocks and popups and want them to be imported first:

less_imports: {
        options: {
            banner: '// Compiled stylesheet'
        },
        styles: {
            src: [
                '<%= config.app %>/assets/less/page-frame-blocks/*.less',
                '<%= config.app %>/assets/less/popups/*.less',
                '<%= config.app %>/assets/less/*.less',
                '!<%= config.app %>/assets/less/styles.less'],
            dest: '<%= config.app %>/assets/less/styles.less'
        }
    },

Now my imports file looks like this:

Want popups styles be imported first? Just move it to top in src section. You get the idea - you can explicitly say what folders you want and in what order using grunt globbing patterns.