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

走远了吗. 提交于 2019-12-12 05:24:59

问题


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.


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



来源:https://stackoverflow.com/questions/34438723/grunt-contrib-less-fails-with-angular-material-media-queries

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!