0

我正在使用 font-awesome 和 HarpJS 开发一个项目。我只是使用预编译的 CSS 版本的 font-awesome，但由于我使用的是 bower，它甚至会将 LESS 文件下载到我的组件文件夹中。

问题是，当我需要将我的资产编译到 dist 文件夹时harp compile，它给了我这个错误：

{
  "source": "Less",
  "dest": "CSS",
  "filename": "/Users/***/lib/fontawesome/less/bordered-pulled.less",
  "lineno": 4,
  "name": "NameError",
  "message": "variable @fa-css-prefix is undefined",
  "stack": "// Bordered & Pulled\n// -------------------------\n\n.@{fa-css-prefix}-border {\n  padding: .2em .25em .15em;\n  border: solid .08em @fa-border-color;\n  border-radius: .1em;\n}\n\n.pull-right { float: right; }\n.pull-left { float: left; }\n\n.@{fa-css-prefix} {\n  &.pull-left { margin-right: .3em; }\n  &.pull-right { margin-left: .3em; }\n}\n"
}

发生此错误是因为 HarpJS 正在尝试编译 font-awesome 的 bower 包附带的 LESS 文件。经过一番研究，我找到了这个答案，它指向了字体真棒文档的页面，上面写着：

页面： http: //fontawesome.io/get-started/#custom-less

打开项目的font-awesome/less/variables.lessorfont-awesome/scss/_variables.scss并编辑@fa-font-pathor$fa-font-path变量以指向您的字体目录。

例子：

@fa-font-path:   "../font";

但是我无法编辑任何这样的文件，因为我的依赖项是使用 bower 安装的，并且我没有在 repo 中检查它们。即使我确实签入了它们，一旦有人使用bower install来获取 font-awesome 的更新版本，该更改也会被覆盖。

对于这种情况，您会使用什么解决方法？

提示：您可以通过执行以下操作来重现此内容：

$ mkdir test
$ cd test
$ bower init
$ bower install --save font-awesome
$ harp compile . dist
4

1 回答 1

0

我刚刚围绕这个问题做了一些研究，我相信解决这个问题的最简单方法是指定一个自定义bower_components目录。

在这个答案中找到了 一种方法来做到这一点：

在项目根目录中创建一个 .bowerrc 文件，其内容为：

{
  "directory" : "_bower_components"
}

再次运行凉亭安装。

Harp 不会编译以下划线 (_) 开头的目录/文件，因此如果您将目录命名为_bower_components，它将成功忽略它。

这种方法的问题是这些文件不会是公开的，因此您可能必须创建一个新的公开文件来从 font-awesome 导入文件。

就像是：

@import "_bower_components/font-awesome/css/font-awesome.css"

在 harp 的问题中存在一张票，他们试图找到一种忽略文件或目录的方法（类似于 .gitignore），但尚未实施。

您可能仍然需要弄清楚如何处理字体文件。希望它以任何方式帮助您前进。

于 2014-07-12T01:27:38.077 回答