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

Question

I'm experiencing a strange error with angular-material & grunt-contrib-less.

Every time i'm trying to run a simply 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'm using the latest stable release of angular material (v.1.0.1).

It's required in less like this:

@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 love some help on this.

Answer 1

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

When you use (less) the file you import will be treated as a less file, no matter the extension. Therefore, you are trying to process css code as if it was less.

When you use (inline) the file contents will just be included as they are, without being processed.

You can read more about this in the Less docs.