Less::ParseError: variable @fa-css-prefix is undefined

Question

trying to deploy my Rails app to heroku and I get this error:

Less::ParseError: variable @fa-css-prefix is undefined

here is my Gemfile:

source 'https://rubygems.org'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.7'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer',  platforms: :ruby

gem 'httparty'

gem 'sorcery'

gem 'less'

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0',          group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

I get the error when I try to push to Heroku

EDIT:

../less/font-awesome.less

/*!
 *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */

@import "variables.less";
@import "mixins.less";
@import "path.less";
@import "core.less";
@import "larger.less";
@import "fixed-width.less";
@import "list.less";
@import "bordered-pulled.less";
@import "spinning.less";
@import "rotated-flipped.less";
@import "stacked.less";
@import "icons.less";

../less/variables.less

// Variables
// --------------------------

@fa-font-path:        "../fonts";
//@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.1.0/fonts"; // for referencing Bootstrap CDN font files directly
@fa-css-prefix:       fa;
@fa-version:          "4.1.0";
@fa-border-color:     #eee;
@fa-inverse:          #fff;
@fa-li-width:         (30em / 14);
...
...

possible duplicate of [Asset Pipeline Undefined Variable SASS](http://stackoverflow.com/questions/21142113/asset-pipeline-undefined-variable-sass) — Bass Jobsen, Nov 30 '14 at 23:20
could you some your Less file structure? You should make sure that font-awesome/less/variables.less has been imported in your main Less project file. — Bass Jobsen, Dec 01 '14 at 07:44
@BassJobsen I edited my answer. Looks like everything is how it should be... — knowbody, Dec 01 '14 at 11:27
I ended up just using CDN for now, but still happy to hear the answer for that. thanks for the help anyway @BassJobsen — knowbody, Dec 02 '14 at 10:30
@knowbody I am using the CDN but it doesn't load all the icons as well as throws an error regarding this fa-css-prefix while I try to push to heroku. — Suraj, Jun 18 '15 at 10:58

Less::ParseError: variable @fa-css-prefix is undefined

0 Answers0