Concat and min additional CSS with Grunt

Just wanted some opinions on how others would do this, I’m still a novice with grunt, just sort of did this through trial and error.

Goal: Concat the 3 CSS files from Fancybox2 and minify them into their own css file.

First I used contrib-less to concat and minify by adding another destination/output in gruntfile.js.

less: {
  dist: {
    files: {
      'assets/css/fancybox.min.css': [
      'assets/css/main.min.css': [

First question I have is, I know this is obviously for compiling less, but it seems to be doing the job (concat and minify), so is this cool to do?

I then could either enqueue the fancybox.min.css in scrips.php or just do an @import. Right now I’m just doing an import and everything seems to work.

Any glaring issues here? I may end up just concat and minifying all this into main.min.css, but was just toying around with grunt and stuff.

Valid CSS is valid LESS, so there’s nothing wrong with what you’re doing. In most circumstances I would just import the CSS file directly into app.less.