Foundation Icon Fonts via Bower

2
votes

I just installed the Foundation Icon Fonts via Bower, and I want to know how best to get them included in my app.scss file while leaving the Bower folder as is. Below is my attempted setup and error I receive. I know I could just place the files is the scss folder of my site or in the foundation folder but then there would be no reason to use Bower.

The error I get is:

 error scss/app.scss (Line 13: File to import not found or unreadable: foundation-icon-fonts/_foundation-icons.scss.

bower_components folder:

 > bower_components
 >> fastclick
 >> foundation
 >> foundation-icon-fonts
 >> ...other components

bower.json:

 {
    "name": "foundation-compass-app",
    "version": "0.0.1",
    "private": "true",
    "dependencies": {
        "foundation": "~5.2.2",
        "foundation-icon-fonts": "*"
    }
 }

config.rb:

 # Require any additional compass plugins here.
 add_import_path "bower_components/foundation/scss"
 add_import_path "bower_components/foundation-icon-fonts"

 http_path = "/"
 css_dir = "stylesheets"
 sass_dir = "scss"
 images_dir = "images"
 javascripts_dir = "js"

 output_style = :compressed
1
sasszurb-foundationbower
If _foundation-icons.scss is inside of bower_components/foundation-icon-fonts, then your import path is wrong. - cimmanon
It is but then why is the import path wrong? - ok1ha
By saying add_import_path "bower_components/foundation-icon-fonts", you're telling Sass, "hey, start looking in this directory for Sass files". By saying @import "foundation-icon-fonts/_foundation-icons.scss", the full search path ends up being bower_components/foundation-icon-fonts/foundation-icon-fonts/_foundation-icons.scss, which doesn't exist. - cimmanon

1 Answers

2
votes

In config.rb:

add_import_path "bower_components/foundation-icon-fonts"

In app.scss:

$fi-path: "/bower_components/foundation-icon-fonts";
@import "foundation-icons";