Grunt-contrib-less fails with Angular -Material @media queries

Question

I got a weird error with angular material and grunt-contrib-less.

Every time I try to run just a grunt less task, it fails with the following error message

 >> ParseError: media definitions require block statements after any features in lib/angular-material/angular-material.css on line 654, column 14: >> 653 >> 654 @media screen\0 { >> 655 .flex { Warning: Error compiling less/libs.less 

I am using the latest stable release of angular material (v.1.0.1).

Less is required:

@import (less) "../lib/angular-material/angular-material.css";

And this is my task:

 less: { options: { compress: true }, libs: { files: { 'public/src/css/libs.css': 'less/libs.less' }, options: { sourceMap: true, outputSourceFiles: true, sourceMapFilename: 'public/src/css/libs.css.map', sourceMapURL: '/src/css/libs.css.map', sourceMapRootpath: '/' } } ....(more tasks here) } 

I would really like to help with this.

Answer 1

You should use (inline) instead of (less) .

When using (less) file you import will be treated as a smaller file, regardless of its extension. So you are trying to process css code as if it were smaller.

When you use (inline) , the contents of the file will simply be included as it is, without processing.

For more information, see Less docs .