@import less directory instruction

Question

My smaller organization now looks like this:

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 

My whole app.less file is @import statements to include all other parts.

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

These instructions are manually maintained that sucks. Is there a better way?

I dream of something like this:

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

Maybe some kind of script handle this at the editor level (using WebStorm)? Or maybe some kind of plugin for the compiler itself?

I currently use fewer middleware files in my application, but I can easily switch to grunts if there is a solution.

Answer 1

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

This is how I use it in my recent project. I have a bunch of fewer files, for example:

And I use grunt-less-imports like this (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 will create styles.less with import:

So, you simply add or remove fewer files, and the task imports the tasks. Is this what you are looking for?

Update

If you need more structure in the import file, you can get it. For example, I have two folders with fewer files, page-frame-blocks and popups and I need to import them 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 import file is as follows:

First want to import popups styles? Just move it up in the src section. You get the idea - you can directly say which folders you want and in what order, using rough globe templates.