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

Question

我遇到 angular-material & g运行t-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[=12=] {
>> 655   .flex {
Warning: Error compiling less/libs.less

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

像这样需要 less:

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

我希望得到一些帮助。

Answer 1

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

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

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

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

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

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

css

angularjs

gruntjs

grunt-contrib-less

angular-material