Compile SASS files in separate folder with relative assets/urls?

Question

I have my own Grunt/Compass/SASS project with a config.rb file that has these settings:

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
add_import_path "./bower_components/slick-carousel/slick"

As you might guess, the problem here is the slick-carousel I am trying to compile together with my other sass-files. It works fine without that component. The slick-folder contains these files:

./ajax-loader.gif
./config.rb
./fonts
./fonts/slick.eot
./fonts/slick.svg
./fonts/slick.ttf
./fonts/slick.woff
./slick-theme.css
./slick-theme.scss
./slick.css
./slick.js
./slick.min.js
./slick.scss

When compiling the slick-theme.scss, I get warnings that it can not find the files which are referenced via relative urls.

WARNING: 'slick.woff' was not found (or cannot be read) in /project-root/fonts

Is there a way to tell the Compass/SASS compiler to use the "current" SASS file as base for the relative paths? So it would look in /project-root/bower_components/slick-carousel/slick/fonts instead?

Answer 1

Slick.js has it's own Sass variables for handling his fonts urls. So you have to properly assign the right path to that variable like this:

// Fonts
$slick-font-path: "./bower_components/slick-carousel/slick/fonts/";

You can check all slick's Sass variables here