用 Grunt 重写 dist 的字体路径答案

【问题标题】：Rewriting font path for dist with Grunt用 Grunt 重写 dist 的字体路径
【发布时间】：2015-01-22 21:20:17
【问题描述】：

我目前在我的项目中安装了 Font-Awesome Bower 包，并将 scss 文件导入到我自己的样式表中。

我目前在我的 scss 文件中引用字体的路径，并覆盖以下默认路径：

$icon-font-path: "../bower_components/font-awesome/fonts/";

...在为开发版本提供服务时效果很好。在构建（到 dist）时，我将字体复制到 /fonts 目录。但是，这是我遇到问题的地方。我的 CSS 显然仍然使用我上面显示的路径，并且找不到字体。所以我的问题是，我怎样才能在开发环境中拥有我当前的路径，但在构建时确保路径被重写为fonts/？

【问题讨论】：

标签： fonts gruntjs font-awesome

【解决方案1】：

这几天我遇到了同样的问题。通过比较不同版本的 yo webapp Gruntfile.js 文件。我发现如果你把下面的代码放进去，那么 font-awesome 就可以了。

复制：{

分布：{ ...，

   {
        expand: true,
        dot: true,
        cwd: 'bower_components/font-awesome/',
        src: 'fonts/*',
        dest: '<%= config.dist %>'
    }

}

copy:dist 复制 5 个 font-awesome 字体文件到 dist/fonts 目录。开发模式下直接引用bower_components/font-awesome/目录，没有问题。

更新：

等等，也许你已经这样做了。我在 main.scss 中发现了 awesome-font 路径：

$icon-font-path: "../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";

$fa-font-path: "../bower_components/font-awesome/fonts/";

【讨论】：