Question

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

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

{
  "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文件。经过一些研究，我找到了this回答，它指出了一个字体真棒文档的页面：

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

打开您的项目font-awesome/less/variables.less或font-awesome/scss/_variables.scss，然后修改@fa-font-path或$fa-font-path变量以指向您的字体目录。

示例：

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

但我不能编辑这样的任何文件，因为我的依赖项是使用bower安装的，我不在repo中检查它们。即使我确实检查过它们，只要有人使用bower install来获取字体的更新版本，就会覆盖该更改。

您会在这种情况下使用哪种解决方法？

提示：您只需执行以下操作即可重现：

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

Answer 1

我刚刚就此问题进行了一些研究，我认为解决此问题的最简单方法是指定自定义bower_components目录。

在this answer找到了一种方法：

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

{
  "directory" : "_bower_components"
}

再次运行bower install。

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

这种方法存在的问题是这些文件不会公开，因此您可能需要创建一个新的公共文件，从font-awesome中导入文件。

类似的东西：

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

在竖琴的问题中有a ticket打开，他们试图找到忽略文件或目录的方法（类似于.gitignore），但它尚未实现。

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

＆＃39;竖琴编译＆＃39;在使用bower的font-awesome上给了我NameError

1 个答案: