问题:

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?

回答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 
  }
]

回答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