14

I'm using Grunt for building my web project. I installed grunt-contrib-less package und added a task to my grunt.initConfig({..});

less : {
            options: {
                paths: ['js/base']
            },
            files: {
                'js/base/*.css' : 'js/base/*.less'
            }
        }

when I run the target less via grunt less, it runs without errors but doesn't compile the less file to a css file.

Running "less:files" (less) task

Done, without errors.

I have installed the lessc package via node, too. Doing lessc <source> <dest> works fine.

Currently I have pointed with the files option directly to one dir which contains one less file for testing. Even if I write the whole file name into files option, it happens nothing...

Later on I want to scan the whole js directory and compile all new modified *.less files.

I have installed following versions:

grunt-cli v0.1.6
grunt v0.4.0
node v0.8.7
npm 1.1.49

BR, mybecks

3 Answers 3

45

The glob pattern js/base/*.css does not match any files, therefore there is no destination. Usually, tasks like this expect multiple inputs to combine into a single output. Also, bear in mind that less is a multi-task, and putting files as a child of less is not doing what you expect. (it is treating it as a target, not a src/dest map)

If you want a 1-1 transform of .less into .css, you can use dynamic expansion. (or you can define each src/dest pair manually, but who wants to do that?)

In your case:

less: {
    options: {
        paths: ['js/base']
    },
    // target name
    src: {
        // no need for files, the config below should work
        expand: true,
        cwd:    "js/base",
        src:    "*.less",
        ext:    ".css"
    }
}
5
  • big thanks, that worked. Also I learned something about dynamic expressions in grunt ;)
    – mybecks
    Feb 27, 2013 at 7:22
  • 1
    I am doing this the same way but get problems with variables being loaded to late and therefor not being accessible when less files are being compiled to css. This is my output. Any idea? Running "less:development" (less) task >> NameError: variable @baseLineHeight is undefined in node_modules/twitter-bootstrap/less/accordion.less on line 8, column 18: >> 7 .accordion { >> 8 margin-bottom: @baseLineHeight; >> 9 }
    – Timo
    Jan 18, 2014 at 13:15
  • 4
    For grunt-contrib-less v0.10.0, the configuration should be: less: { options: {...}, files: {...} }. Property name should be files, not src.
    – Rockallite
    Mar 19, 2014 at 8:38
  • @Timo did you figure out how to load your variable less file(s) first? Oct 17, 2014 at 13:51
  • @chandlervdw Sorry I did not.
    – Timo
    Oct 17, 2014 at 16:59
9

I used Anthonies solution but stil had an error

Warning: Object true has no method indexOf

If I changed the order putting expand true as second it gave me the error

Unable to read "less" file

where "less" was the value of the first item in my list.

I solved it by changing files into an array like this:

less: {
    options: {

            paths: ["js/base"]
        },
        files: [{
            expand: true,
            cwd: "js/base",
            src: ["**/*.less"],
            dest: "js/base",
            ext: ".css"
        }]
},

I used "grunt-contrib-less" : "^0.11.0"

1
  • excellent, the previous examples were not working for me either. files:[{...}] did the job. Jul 31, 2014 at 21:34
6

This works for me, but modified to reflect this scenario:

less: {
    options: {
        paths: ["js/base"]
    },
    files: {
        expand: true,
        cwd: "js/base",
        src: ["**/*.less"],
        dest: "js/base",
        ext: ".css"
    }
},

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.