Slick Carousel trying to change file path variable

Question

I'm using Slick Carousel with Zurb Foundation and the recommended use it to have the css, js in its own folder in the root directory and when i set my project up like this i can get it to work perfectly.

But I'd like to add it into my current project file structure, like so:

Project Root
- Fonts
  - slick.eot
  - slick.svg
  - slick.ttf
  - slick.woff
- Images
  - Loading.gif
- JS
  - slick.min.js
- SCSS
  - slick.scss
- Stylesheets
  - slick.css

I thought all I'd need to do is change the default variables given in the scss file:

$slick-font-path: "./fonts/" !default;
$slick-loader-path: "./" !default;

But nothing I try has worked, the compiled css has urls like this:

background: #fff url('/images/ajax-loader.gif') center center no-repeat;

I'm using zurb foundations config looks like: '# Require any additional compass plugins here. add_import_path "bower_components/foundation/scss" # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "scss" images_dir = "images" javascripts_dir = "js"' — GCrane93, Sep 20 '14 at 17:21
possible duplicate of [How to make SASS put relative paths in its output](http://stackoverflow.com/questions/12508630/how-to-make-sass-put-relative-paths-in-its-output) — cimmanon, Sep 20 '14 at 22:58
@cimmanon sorry if this is a duplicate but thankyou for your help, i focused on the config.rb that came with slick and that foundation used and was able to fix the carousel, seems so easy now. :) — GCrane93, Sep 21 '14 at 14:44

score 1 · Answer 1 · edited May 20 '15 at 23:47

The two variables $slick-font-path and $slick-loader-path are only used as a fallback for a missing image-url and font-url function, which is usually provided by Compass (see: http://compass-style.org/reference/compass/helpers/urls/#image-url).

The only thing you have to do, is to define the default directories for images and fonts in the Gruntfile provided by grunt-contrib-compass (https://github.com/gruntjs/grunt-contrib-compass)

Here's a snippet from my project's Gruntfile. Just look at the imagesDir and fontsDir lines in the dist section. The rest may look different in your project.

compass: {
  options: {
    debugInfo: false,
    imagesDir: ['src/assets/img'],
    raw: [
      'http_path = "/"',
      'Sass::Script::Number.precision = 8',
      'sass_options = {',
      '  :read_cache => true,',
      '}'
    ].join("\n"),
    require: ['sass-globbing'],
    importPath: ['bower_components/foundation/scss', 'bower_components/slick.js/slick'],
    sassDir: ['src/assets/scss']
  },
  dist: {
    options: {
      cssDir: ['dist/assets/css'],
      imagesDir: ['dist/assets/img'],
      fontsDir: ['dist/assets/fonts'],
      environment: 'development',
      force: true,
      javascriptsDir: 'build/js',
      noLineComments: false,
      outputStyle: 'expanded',
      raw: [
        'sass_options = {',
        '  :sourcemap => true', // this set to 'true' has no effect, if you aren't using sass >= 3.3
        '}'
      ].join("\n"),
      sourcemap: true // this set to 'true' has no effect, if you aren't using sass >= 3.3
    }
  }
}

Hope this helps.

Slick Carousel trying to change file path variable

1 Answers1