Less has some updated syntax. However this current plugin doesn't recognise some of them.

Such as:

@import (less) "../bower_components/angular-ui/build/angular-ui.css";

Which assumes the CSS file as less allowing it to be properly imported.

Could we have a 'verbose' less option available? It would help with debugging.

YUI Compressor is superior to other minifiers in several ways, but the default behaviour is to output one long line, which can cause problems in some browsers.

YUI Compressor has a line-break option (as a linebreakpos argument in the cssmin function in cssmin.js).

Would it be possible to add this as an option in the less task grunt config?

I'm currently seeing if I can figure out a way to do this, myself... but if you have a quick and easy fix, so much the better!

Users may want to use grunt templates inside of the options.paths option for LESS.

dirs: {
  source: 'source/',
  build: 'build/'
},

less: {
  compile: {
    options: {
      paths: ['<%= dirs.source %>less/include']
    },
    files: {
      '<%= dirs.build %>css/style.css': ['<%= dirs.source %>less/style.less']
    }
  }
}

Right now I have a task that I implemented borrowing code from the old grunt-less task. I called it cLess and it is part of what I happen to call grunt-r3m (yes, I'm not good with names). https://github.com/royriojas/grunt-r3m

The task does the same as the original but also moves the assets referenced by the less files or css files to a folder relative to the output file called /assets/ names for the assets are generated automatically. I need this feature to avoid copying the assets to the output folder, as I only have one distribution folder.

If you implement support for this I can easily drop support for this task to avoid fragmentation.

I will be more than willing to help you with this feature if you happen to find it useful.

Any error in parsing less throws a fatal error, which causes a problem when using the task with yeoman/grunt-regarde because it causes the watch task to immediately quit.

This is related to gruntjs/grunt-contrib-watch#58 and yeoman/grunt-regarde#3, but those issues seem a bit stuck in the mud, so I thought I'd bring it up here as well.

I need someone to help update this plugin to work with grunt 0.4.0rc5.

I had to revert the whole file src-dest mappings implicit iteration abstraction per gruntjs/grunt#606, and once again, multi tasks have to iterate over this.files manually. In addition, there's a new this.filesSrc array that contains a reduced, uniqued set of all matched src files in case the task is read-only and only cares about source files.

See:

• this comment for a description of the changes made.
• grunt-contrib-jshint for an example using the this.filesSrc array.
• grunt-contrib-concat for an example using the this.files array.

Notes:

• A user may specify a new option nonull in addition to src to tell grunt to keep patterns or filepaths that don't actually match files. Because of this, the task shouldn't explode if a nonexistent src filepath is encountered. I handle this in the grunt-contrib-concat by warning if not grunt.file.exists but not failing the task.

Guidelines for updating / publishing this plugin:

• Change this project's version number to one ending in "rc5" so that it's clearer that it works with grunt 0.4.0rc5. If the existing version number doesn't end in an "a" or "rc" increment the patch version. Eg, jshint went from 0.1.0 -> 0.1.1rc5
• Ensure grunt 0.4.0rc5-compatible plugins are specified in package.json devDependencies like this (grunt-contrib-internal can be "*")
• Update the CHANGELOG like this
• Regenerate the README.md file via grunt.
• Delete node_modules, run npm cache clean and re-run npm install to test.
• Publish to npm using --tag=master (not latest)

Hello,
I get the following when launching grunt. I do not understand the [no src] part as the definition of the task seems to be ok.
Any idea please ?

Running "less:main" (less) task
[D] Task source: /var/www/mobile_boilerplate/trunk/grunt/node_modules/grunt-contrib-less/tasks/less.js
Verifying property less.main exists in config...OK
Files: [no src] -> main.css
Options: paths=["/var/www/mobile_boilerplate/www/css/less/"]
Destination not written because compiled files were empty.

versions :
grunt-cli v0.1.6
grunt v0.4.0
[email protected] node_modules/grunt-contrib-less
├── [email protected]
└── [email protected] ([email protected])

extract from config.json

  "js": "/var/www/mobile_boilerplate/www/js/",
  "less": "/var/www/mobile_boilerplate/www/css/less/",
  "css": "/var/www/mobile_boilerplate/www/css/"

extract from GruntFile.js

    less: { // compile less files into css and put it in cfg.build folder
        main: {
            options: {
                paths: ["<%= cfg.less %>"]
            },
            files: {
                "<%= cfg.css %>main.css": "<%= cfg.less %>main.less"
            }
        }
    }

I also tested the following formats for files definition in vain :

'<%= cfg.css %>main.css': '<%= cfg.less %>main.less'

src:  "<%= cfg.less %>main.less",
dest: "<%= cfg.css %>main.css"

files: [
    {src: "<%= cfg.less %>main.less", dest: "<%= cfg.css %>main.css"}
]

Parse:
font-size: 0/0 a;

Output:
font:NaN a;

This shortcut is used in bootstrap, mixin.less.

Hi!

Have you checked sass/less supporting mediaquery in compiled css files?

When I set dumpLineNumbers option to 'mediaquery' (without compressing of course), the mediaquery info doesn't show the correct line number of the less definition in the compiled css file but shows the line number that points to the compiled css which is useless while developing with less.

If I compile with lessc command from terminal, everything works fine!

Could you solve this problem because source map would be very useful.

Hey,
just experienced problem while minifying less file using this plugin with yuicompress option on:
following code
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
gets compressed into this
@media print,(-o-min-device-pixel-ratio:5/

Right now I have a task that I implemented borrowing code from the old grunt-less task. I called it cLess and it is part of what I happen to call grunt-r3m (yes, I'm not good with names). https://github.com/royriojas/grunt-r3m

The task does the same as the original but also moves the assets referenced by the less files or css files to a folder relative to the output file called /assets/ names for the assets are generated automatically. I need this feature to avoid copying the assets to the output folder, as I only have one distribution folder.

If you implement support for this I can easily drop support for this task to avoid fragmentation.

I will be more than willing to help you with this feature if you happen to find it useful.

Hi everyone, i am new to grunt and i can not find any guides to make it less work with yeoman 1.+. - so this is my working gruntfile-change:

I deleted all compass-related stuff and then added this to the watch:
less: {
files: ['<%= yeoman.app %>/styles/less/*.less'],
tasks: ['less']
},

the new task:
less: {
dev: {
files: {
".tmp/styles/main.css": "<%= yeoman.app %>/styles/less/*.less"
}
}
},

finally, i added less:dev to my server-task
grunt.registerTask('server', [
'clean:server',
'less:dev',
'livereload-start',
'connect:livereload',
'open',
'watch'
]);

you do not need to load the npmTask, as long as you installed grunt-contrib-less with --save-dev. This command at the top will do the work:
require('matchdep').filterDev('grunt-*').concat(['gruntacular']).forEach(grunt.loadNpmTasks);

Just like for the concat and uglify task, I would be nice to be able to inject a banner in the compiled css.

Would this be something you would consider to add ?

Now Grunt have a declarative API that add files dynamically: http://github.com/gruntjs/grunt/wiki/Configuring-tasks

dynamic_mappings: {
  // Grunt will search for "**/?.js" under "lib/" when the "minify" task
  // runs and build the appropriate src-dest file mappings then, so you
  // don't need to update the Gruntfile when files are added or removed.
  files: [
    {
      expand: true,     // Enable dynamic expansion.
      cwd: 'lib/',      // Src matches are relative to this path.
      src: ['**/?.js'], // Actual pattern(s) to match.
      dest: 'build/',   // Destination path prefix.
      ext: '.min.js',   // Dest filepaths will have this extension.
    },
  ],
},

I tried the last two days to solve this problem, but without success. I can call parser.parse (data, callback) but the callback is never executed = \ \

P.S.: I don't use dynamic mapping with grunt-contrib-less because this one is not need for less, as i can @import inside main less file.

But after grunt update to 0.4.0rc7 to compile my coffee source the grunt-contrib-less broke.

I have multiple classes, which only import another less file.
The problem is, that every class like that, except for the first occurence is ignored.

Example:

i have the files theme-green.less, theme-yellow.less, theme-orange.less and theme-blue.less.

in style.css i have these lines:

.theme-green{@import "theme-green.less";}
.theme-yellow{@import "theme-yellow.less";}
.theme-orange{@import "theme-orange.less";}
.theme-blue{@import "theme-blue.less";}

in the theme-* files i set a few variables and then import "theme.less":

@body-background: #FFFFFF;
@sidebar-background: #ECECEC;

@import "theme.less";

The result in the css file is only the theme for .theme-green

To enable the strictMath option introduced in LESS.js 1.4, I updated the lessOptions as follows:

var lessOptions = {
    parse: ['paths', 'optimization', 'filename', 'strictImports', 'syncImport', 'dumpLineNumbers', 'relativeUrls'],
    render: ['compress', 'yuicompress', 'ieCompat', 'strictMath']
};

Wiht Win Less i have no problem in the compilation, but when trying to run the Grunt task i get this error:

ParseError: Unrecognised input in src/less/commons.less on line 630, column 7:
629 .spanX (@Index) when (@Index > 0) {
630 (~".span@{index}") { .span(@Index); }
631 .spanX(@Index - 1);

In the first moment i suppouse that could be a problem with "@import" sentence, or maybe with variables, but i have concatenated all files and continue getting the same error but in a different line.

It's the project of a friend, check it out the Less sources:
https://bitbucket.org/alfonsomartinde/base-grunt/src/aa1594b99d348b20900c0c1c00ec3dc8df75ff57/src/less/commons.less?at=master

Thanks for all.

I am setting the output filename and location as a variable, but it is interpreting the variable as a string (a file with the variable name is being created). Below is an example

var outputFile = 'css/generated/test.css';

less: {
    dist: {
        files: {
            outputFile: ['file1.css', 'file2.css']
        }
    }
}

I try use data-uri function to convert image to base64 like this:

Example:
div{
background: data-uri('../data/image.jpg');
}

Output:
div{
background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
}

But it doesn't work :/

Which reason it can be?

Today i found that some .less files were not builded, because there was syntax error:

.class {
 background: rgba (0,0,0,.5); /* space after rgba is syntax error */
}

Could you please make this plugin show errors? i've more fifty .less files for different components.. such plugin behaviour causes to spend lots of time...

Thanks in advance!

In the usage example, the less property value is an object with the properties development and production. Is it required to put the options and files properties inside something like development and production? In my case I only have one way I want to handle .less files and was wanting to put the options and files properties directly inside the object for the less property. It would be nice if this was supported:

    less: {
      files: [{
        expand: true,
        cwd: 'styles',
        src: ['*.less'],
        dest: 'build/styles',
        ext: '.css'
      }]
    }

When I call "grunt less" with the following code im getting "Warning: Object true has no method 'indexOf' Use --force to continue."

if I remove the targets and put the options and files directly under less it works fine

    less: {
                    t1: {
                            options: {
                                    path: ['<%= less_src_path %>'],
                            },
                            files: {
                                    //'<%= less_build_path %>/app.css':'<%= concat.less.dest %>',
                                    //Dynamic expansion 1:1
                                    expand: true,
                                    cwd:    '<%= less_src_path %>',
                                    dest:   '<%= less_build_path %>',
                                    src:    '*.less',
                                    ext:    '.less.css'
                            }
                    },
                    t2: {
                            options: {
                                    path: ['<%= less_src_path %>'],
                                    //compress: true
                                    yuicompress: true
                            },
                            files: {
                                    //'<%= less_build_path %>/app.css':'<%= concat.less.dest %>',
                                    //Dynamic expansion 1:1
                                    expand: true,
                                    cwd:    '<%= less_src_path %>',
                                    dest:   '<%= less_build_path %>',
                                    src:    '*.less',
                                    ext:    '.less.min.css'
                            }
                    }

            }

This seems to be a regression of https://github.com/gruntjs/grunt-contrib/issues/89, although with different results.

Given:

less: {
  compile: {
    files: { "app.less.css": "nonexistent/*.less"}
  }
}

And the folder nonexistent does not exist
When grunt less is run
Then:

Warning: Cannot read property 'dest' of undefined Use --force to continue.
Aborted due to warnings.

Please excuse my ignorance, but this doesn't seem to work at all with my project. I have Node installed, I have Grunt install globally, I have grunt-contrib-less installed locally to my project, I'm on a Mac (if that matters). With my less files, I have one central less file for the app as a whole, and then smaller less files that go with specific parts of the web app UI in other folders. My Grunt file looks like this:

module.exports = function(grunt) {

  grunt.initConfig({
    watch: {
      files: '<config:less.files>',
      tasks: 'less'
    },
    less: {
      files: {
        'app/styles/app.css': 'app/styles/app.less'
      },
      options: {
        paths: ['app/styles', 'app/pages', 'app/widgets'],
        compress: true
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.registerTask('default', 'less');
};

But if I want to simply run grunt, I get this in the terminal:

Running "less:files" (less) task

Running "less:options" (less) task

Done, without errors.

But nothing actually happens.

Is there any way to parse all less files in a directory by only specifiying the directory, something like:

Has anyone come up with a solution for source mapping in google chrome for the purpose of debugging. I have found quite a few articles showing how to do this in sass and various other less processors but not in grunt-contrib-less. Below is one such article.

http://robdodson.me/blog/2012/12/28/debug-less-with-chrome-developer-tools/

I have got the following configuration:

    less: {
      all: {
        options: {
          paths: ["a/views/less", "b/views/less"]
        },
        files: {
          "public/css/a/application.css": "a/views/less/application.less",
          "public/css/b/application.css": "b/views/less/application.less"
        }
      }
    },

the problem is that the paths option does not take care of the second path

  "b/views/less"

According to the README.md, an Array should be allowed.

If I runt grunt watch --force and introduce an errror, the plugin should simply show where the error is and continue to watch. but it aborts.

I've tracked it down to this line
https://github.com/gruntjs/grunt-contrib-less/blob/master/tasks/less.js#L52

If I change this to true, it will continue watching. but then I remove --force it will not fail properly.

Any suggesstions?

I'm trying to set this up to compile my LESS files into 2 css files. I have a file called "main.less" which is just a bunch of @imports to my actual less files. I put a comment in with a specific pattern to match which I use to split the file contents into 2 segments and then put each segment into 2 temporary files. The separate files get created properly as "temp1.less" and "temp2.less" and then the files option is generated like so:

less: {
    options: {
        files: {
            'main1.css': ['temp1.less'],
            'main2.css': ['temp2.less'],
        }
    }
}

According to the grunt config documentation, this should be a valid configuration. However, when I run the package, I get the error listed in the title of this issue. I've tried various configuration formats and I've tried running as multi-task, but nothing seems to work.

I'd appreciate any help!

LESS compiling is relatively slow, it would be nice if there was an option to check if a recompilation is needed. (This would be especially useful with grunt watch)

Using dumpLineNumbers: 'comments', CSS is currently generated with comments like this:

/* line 467, /Users/myname/path/to/project/less/file.less */

But when working on a team project that absolute path obviously differs from person to person. Each commit appears to have thousands of changes to a single CSS file even if the contributor only changed one line.

Perhaps an alternative would be to write relative paths, which would render the same for all contributors:

/* line 467, /less/file.less */

Useful when watching for changes

less: {
          development: {
            files: {
              "result.css": "source.less"
            }
          }
        }

when i type cmd "grunt less:development"
it shows me

PS D:\wwwroot\php\grunt> grunt less:development
Running "less:development" (less) task
Verifying property less.development exists in config...ERROR
>> Unable to process task.
Warning: Required config property "less.development" missing. Use --force to continue.

also with source.less in the root folder, when i run "grunt less"
ti shows

PS D:\wwwroot\php\grunt> grunt less
>> No "less" targets found.
Warning: Task "less" failed. Use --force to continue.

Since upgrading from 0.5.0 to 0.6.1, the compiled output includes "font: NaN" if fed "font: 0/0".

Used in h5bp/html5-boilerplate@aa0396eae757.

I'm trying to compile all my less files in order. I have one file which contains all the variables, which should be included first. But I get a compile error because it can't find the variables.

I did solve this issue by first concating all the files together then running less on it but I would like to avoid that.

Here is my code:

less:{

      files:[
        "assets/css/variables.less",
        "assets/css/mixins.less",
        "assets/css/reset.less",
        "assets/css/core.less",
        "assets/vendor/**/*.css",
        "assets/css/**/*.less"
      ],

      debug: {
        files: {
          "dist/debug/css/blah.css": "<config:less.files>"
        }
      }
}

The documentation is inconsistent with the example and I had to try the example in the https://github.com/gruntjs/grunt-contrib-less/blob/master/grunt.js to get it to work
Also it is unclear why I need the paths array value if I am also including it in the files array

In fact, the example that worked for me was

grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', 'less');

less: {
compile: {
options: {
paths: ['app/styles/less'],
//yuicompress: true,
//flatten: true
},
files: {
'app/styles/result.css': ['app/styles/less/application.less']
}
}
},

is it possible or will it be posible for included files' rules to be adjusted during compilation so that url properties can be written relative to the included file instead of relative to the parent file?

Would it be possible to trigger an event whenever a file is compiled?

I'm looking to include this task into our company's build system and need a way to hook into this task, ideally getting the original file name and the new filename.

ie.

grunt.event.emit('less.compile', files, destFile);

The documentation is inconsistent with the example and I had to try the example in the https://github.com/gruntjs/grunt-contrib-less/blob/master/grunt.js to get it to work
Also it is unclear why I need the paths array value if I am also including it in the files array

In fact, the example that worked for me was

grunt.loadNpmTasks('grunt-contrib-less');
grunt.registerTask('default', 'less');

less: {
compile: {
options: {
paths: ['app/styles/less'],
//yuicompress: true,
//flatten: true
},
files: {
'app/styles/result.css': ['app/styles/less/application.less']
}
}
},

The grunt task returned no error and outputted the file properly, but I was missing a lot of CSS rules.

After a quick check, it appears calling lessc on one of the imported files was throwing a bunch of errors, yet none of those appeared via grunt-contrib-less.

I am receiving the above error message when trying to compile a simple LESS file to CSS. My grunt config settings are:

less: {
    dev: {
        files: {
            'styles.less': 'styles.css'
        }
    }
}

Any ideas why this is happening?

I am using Grunt v0.4 and the latest version of this library (0.5.0)

From the Official Documentation :

You can import both css and less files. Only less files import statements are processed, css file import statements are kept as they are. If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

Is there a way to do this now?

Using LESS default output, I've noticed it converts my tabs to 2 spaces and removes empty lines (among a few other oddities).

Is there any way to make it so LESS doesn't do anything to reformat my code in terms of indentation and blank lines?

Also, what exactly does the optimization option do? I've set it to several numbers (ranging from 0 to 1000) and I haven't seen any difference in the output of my CSS. I was kinda hoping this setting would control the level of alterations LESS would do to my indentation.

Sorry to bother you with my stupid questions. 😦

I need to explicitly run the grunt command to create the destination css file even though it is updating and being watched henceforth.

While this itself is not a issue, it is not mentioned in the documentation and hence was a tremendous waste of time trying to figure it out

ebff49b bumps the package's version to 0.5.0rc7 but is it true?
I'm not sure whether npm allows decreasing the version after publishing a module.

Add growl support into this task. If it's wanted I'll see if I can get a pull request in.

It converts them to:

@-webkit-keyframes spin {
  /* line 135, /local/path/to/my.less */
  @media -sass-debug-info{filename{font-family:file\:\/\/\/local\/path\/to\/my\.less}line{font-family:\00003135}}
  0% {
    -webkit-transform: rotateY(-180deg);
  }
  /* line 136, /Users/sparanoid/Git/sparanoid-start/app/assets/less/main.less */
  @media -sass-debug-info{filename{font-family:file\:\/\/\/local\/path\/to\/my\.less}line{font-family:\00003136}}
  100% {
    -webkit-transform: rotateY(0deg);
  }
}

Which Safari and Chrome don't treat it as a valid keyframes.