Grunt 不编译 font-awesome.LESS 或 CSS答案

【问题标题】：Grunt does not compile font-awesome.LESS or CSSGrunt 不编译 font-awesome.LESS 或 CSS
【发布时间】：2014-05-27 18:40:06
【问题描述】：

关于这个问题的已回答问题并没有解决我的问题。

当我使用Bower 拉入Font Awesome 库并将库直接集成到index.html 或使用托管版本（如下所示）时，图标显示正常：

<link href="bower_components/fontawesome/css/font-awesome.css" rel="stylesheet" />

or

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

但是，当我使用Grunt 编译 font-awesome.less 或 font-awesome.css 时，没有显示任何图标（请看图片：我在 base.less 中导入的 Bootstrap LESS 工作正常！）：

frontend.less：

@import "base.less";
@import "/bower_components/fontawesome/less/font-awesome.less";

//@import (less)"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

Gruntfile.js（摘录）：

less: {
        development: {
            options: {
              compress: true,  // Minification
            },
            files: {
              // Compile frontend.less into frontend.css
              "./public/assets/css/frontend.min.css":"./app/assets/less/frontend.less",
              // Compile backend.less into backend.css
              "./public/assets/css/backend.min.css":"./app/assets/less/backend.less",
            }
        }
    },

如果您建议如何使用 Grunt 正确导入/编译 font-awesome.less，或者这是一个 Font Awesome 错误，我将不胜感激。

【问题讨论】：

在编译的 CSS 中，实际字体文件的路径很可能不正确。请参阅github.com/FortAwesome/Font-Awesome/pull/3138（尽管他们使用的解决方案有些缺陷，但正确的解决方案是使用--relative-urls/relativeUrls 选项，或者只是在您导入font-awesome.less 的文件中设置@fa-font-path 变量）。
@seven-phases-max 你是对的：Font Awesome 和 Glyphicons 的路径都不正确。 Chrome 控制台为字体返回 404 错误。正如您所建议的，我将@fa-font-path: "bower_components/font-awesome/fonts"; 和@icon-font-path: "bower_components/bootstrap/fonts"; 添加到frontend.less，但它一直指向公共文件夹中的http://localhost/testing/public/assets/css/bower_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3。字体实际上位于根目录的 bower_components 文件夹中。知道如何解决这个问题吗？
确保定义@icon-font-path 之后 @import ".../font-awesome.less";（少用“最后定义获胜”的原则）。
我做了，但仍然无法正常工作。我可以通过使用像 @icon-font-path: "http://localhost/testing/bower_components/bootstrap/fonts/"; 这样的绝对路径来修复 Glyphicons，但这并不是一个理想的解决方案。 Font Awesome 不断将版本号添加到链接末尾，这弄乱了路径...path.less 似乎没有正确编写。

标签： css fonts less gruntjs font-awesome

【解决方案1】：

根据您的 Grundfile.js，您将为已编译的 css 创建 ./public/assets/css/frontend.min.css 文件。您应该设置 @fa-font-path 相对于该文件。因为"http://localhost/testing/bower_components/bootstrap/fonts/" 也适用于您的情况@icon-font-path: "testing/bower_components/bootstrap/fonts/"。

在你的 frontend.less 中：

@import "base.less";
@import "/bower_components/fontawesome/less/font-awesome.less";
@icon-font-path: "testing/bower_components/bootstrap/fonts/";

或者将字体文件从/bower_components/bootstrap/fonts/ 复制到/public/assets/fonts 并设置@icon-font-path: "../fonts"（默认值已在"/bower_components/fontawesome/less/variables.less 中定义）。

请注意，Font Awesome v4.2 还允许您设置：

@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts"; // for referencing Bootstrap CDN font files directly

【讨论】：