0

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?

user2602152
  • 687
  • 7
  • 24

1 Answers1

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

diego.fontenelle
  • 26
  • 1
  • To clarify for others viewing this, the variables in Slick are defined as !default. This means the default value from Slick will not be overwritten when you set this variable before importing the sass-files from Slick. – user2602152 Sep 04 '15 at 13:52