'harp compile' gives me NameError on font-awesome using bower

Question

I'm developing a project using font-awesome and HarpJS. I'm just using the pre-compiled CSS version of font-awesome, but since I'm using bower it downloads even the LESS files to my components folder.

The problem is, when I need to compile my assets to a dist folder with harp compile, it gives me this error:

{
  "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"
}

This error is happening because HarpJS is trying to compile the LESS files that came with the font-awesome's bower package. After some research, I found this answer, which points me to a page of the font-awesome documentation that says:

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

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

Example:

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

But I can't edit any file like this, since my dependencies are installed using bower and I don't check them in the repo. Even if I did check them in, that change would be overriden as soon as someone uses bower install to get an updated version of font-awesome.

What workaround would you use for this situation?

TIP: You can reproduce this just by doing:

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

score 0 · Answer 1 · edited May 23 '17 at 10:26

I just did some research around this issue and I believe the easiest way to fix this issue is by specifying a custom bower_components directory.

Found in this answer a way to do just that:

Create a file .bowerrc in the project root with the content:

{
  "directory" : "_bower_components"
}

Run bower install again.

Harp doesn't compile directories/files that start with underscore (_), so if you name the directory _bower_components, it will successfully ignore it.

The problem with this approach is that those files will not be public, so you might have to create a new public file that imports the file(s) from font-awesome.

Something like:

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

There's a ticket open in harp’s issues where they're trying to find a way to ignore files or directories (similar to .gitignore), but it hasn't been implemented yet.

You might still have to figure out what to do with the font files. Hope it helps in any way to move you forward.

'harp compile' gives me NameError on font-awesome using bower

1 Answers1