Using grunt-contrib-less inline. Generate one CSS file foreach LESS file

Question

I am attempting to use the grunt-contrib-less grunt task to compile my less files to css. What I would like to do is compile them inline, so that each .less file creates a single .css file.

Workflow:

1) Initial file system:

someFolder2
    joe.less
    rachel.less
    someSubFolderA
        jake.less
        bob.less
someFolder4
    someSubFolderB
        ally.less

2) run grunt less

3) File system:

someFolder2
    joe.less
    rachel.less
    joe.css
    rachel.css
    someSubFolderA
        jake.less
        bob.less
        jake.css
        bob.css
someFolder4
    someSubFolderB
        ally.less
        ally.css

I have played around with various options but I can't figure out how to do this. Any suggestions would be greatly appreciated. This is the starting point grunt task I have been using:

less: {
    paths: [
        "src/someFolder2/**/*.less",
        "src/someFolder4/**/*.less"
    ],
    options: {
        // outputSourceFiles: true
        // compress: true,
        // sourceMap: true,
        // sourceMapFilename: "jake.txt"
        // outputSourceFiles: true
    }
}

This will (I think) concat all of the less files into a single CSS file.

Kinga Kinga · Accepted Answer · 2014-07-09T23:43:20

You have to define task for grunt

options: {
    paths: ["<%= cfg.dist %>/src/less"],
    sourceMap: true,
    rootpath: "<%= cfg.dist %>/",
    relativeUrls: false,
    cleancss: false
},

test: {
    files: [
        {
            expand: true,
            cwd: '<%= cfg.dist %>/src/less/',
            src: ['*.less'],
            dest: '<%= cfg.dist %>/build/css/',
            ext: '.css'
        }
    ]
}

/src/less/ - location of your less files

/build/css/ - folder where css will be generated

Using grunt-contrib-less inline. Generate one CSS file foreach LESS file

1 Answers