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

Question

我在使用 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)。

它在 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 中阅读更多相关信息.