Grunt-contrib-less 因 Angular-Material @media 查询而失败 [英] Grunt-contrib-less fails with Angular-Material @media queries

问题描述

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

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

每次我尝试运行一个简单的 grunt 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

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

I'm using the latest stable release of 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)
}

我希望得到一些帮助.

推荐答案

你应该使用 (inline) 而不是 (less).

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

当您使用 (less) 时，您导入的文件将被视为一个 less 文件，无论扩展名如何.因此，您正在尝试处理 css 代码，就好像它是 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.

当您使用 (inline) 时，文件内容将按原样包含在内，不会被处理.

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.

这篇关于Grunt-contrib-less 因 Angular-Material @media 查询而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！