Grunt-contrib-less 因 Angular-Material @media 查询而失败答案

【问题标题】：Grunt-contrib-less fails with Angular-Material @media queriesGrunt-contrib-less 因 Angular-Material @media 查询而失败
【发布时间】：2016-03-30 01:38:15
【问题描述】：

我在使用 angular-material 和 grunt-contrib-less 时遇到了一个奇怪的错误。

每次我尝试运行一个简单的 grunt less 任务时，它都会失败并显示以下错误消息

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

我正在使用 Angular Material 的最新稳定版本 (v.1.0.1)。

在不太需要这样的情况下：

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

这是我的任务：

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)
}

我希望得到一些帮助。

【问题讨论】：

标签： css angularjs gruntjs angular-material grunt-contrib-less

【解决方案1】：

您应该使用(inline) 而不是(less)。

当您使用(less) 时，您导入的文件将被视为less 文件，无论扩展名如何。因此，您正在尝试处理 css 代码，就好像它更少一样。

当您使用(inline) 时，文件内容将按原样包含在内，而不进行处理。

您可以在Less docs 中阅读更多相关信息。

【讨论】：