grunt less multiple css files keeping folder struc

Question

I have a branding application where I would like to have this output:

• /branding/
  • /default/
    • default.css
  • /brand1/
    • brand1.css
  • /brand2/
    • brand2.css

This one should be output from a branding folder with same structure but with .less files

So I would like to do something like this:

less: {
      production: {
        options: {
        },
        files: {
          'dist/branding/**/*.css': 'branding/**/*.less'
        }
      }
    }

I just seen examples on this where they all go to same folder, but I want to keep this dynamic because in my case there is like a ton of brandings, and the branding folders have more than just a css file, they also have other artifacts like images and so on. Any suggestions?

Answer 1

If I understand you correctly you want LESS files under branding compiled to a dist/branding folder and to keep the folder structure.

To do that you would do something like this:

files: [
  {
    expand: true, // Recursive
    cwd: "branding", // The startup directory
    src: ["**/*.less"], // Source files
    dest: "dist/branding", // Destination
    ext: ".css" // File extension 
  }
]

Answer 2

You can visit http://rajdeepdeb.me/less-to-css-grunt-for-multiple-files/

Add the following configuration in your grunt file ...rest of the grunt configuration, files: [{ expand: true, cwd: '/', src: ['**/*.less'], dest: '/', ext: '.css', extDot: 'last' }], ... rest of the grunt configuration