Search code examples
gruntjslessgrunt-contrib-less

With Grunt, how can I compile all *.less files, if I have global mixins and constants?


I want to organize my HTML, JS, and LESS by module. I'm already using Grunt to compile *.js and *.html from my source folders.

So I configured grunt as follows:

grunt.initConfig({
    less: {
        ALL: {
             files: { 'compiled.css': '**/*.less' }
        }
    }
}

But this runs into a major problem: constants and mixins from my /helper/*.less files are not accessible to other .less files.
It seems like grunt-contrib-less compiles each individual .less file, and then combines the output, but doesn't compile anything "globally".

The only solution I can think of is to create and maintain a master.less that @imports each individual .less file. But I'm trying to achieve an extremely modular build process, and I don't have to list any HTML or JS files, so I'm really hoping to find a *.less solution too!


Solution

  • Thanks to @seven-phases-max for the following answer!

    less-plugin-glob

    Allows you to use wildcards in @import statements! Works perfectly!

    // master.less
    @import "helpers/**/*.less";
    @import "modules/**/*.less";
    

    And all you need to add to your Grunt configuration is the plugins option:

    // Gruntfile.js
    grunt.initConfig({
        less: {
            'MASTER': {
                src: 'master.less',
                dest: 'master.css',
                options: {
                    plugins: [ require('less-plugin-glob') ]
                }
            }
        }
    });
    

    And, don't forget, npm install less-plugin-glob.