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 @import
s 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!
Thanks to @seven-phases-max for the following answer!
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
.