Slick Carousel尝试更改文件路径变量

Question

我在Zurb Foundation中使用Slick Carousel，建议使用它在根目录中自己的文件夹中包含css，js，并且当我像这样设置项目时，我可以使其正常工作。

但是我想将其添加到当前的项目文件结构中，如下所示：

• 项目根目录
  • 字体
    • slick.eot
    • slick.svg
    • slick.ttf
    • slick.woff
  • 图像
    • Loading.gif
  • JS
    • slick.min.js
  • SCSS
    • slick.scss
  • 样式表
    • slick.css

我以为我需要做的就是更改scss文件中提供的默认变量：

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

但是我没有尝试过，编译过的css具有这样的URL：

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

Answer 1

这两个变量$slick-font-path和$slick-loader-path仅用作缺少的image-url和font-url函数的备用，通常由Compass提供（请参阅：http://compass-style.org/reference/compass/helpers/urls/#image-url）。

[您要做的就是在grunt-contrib-compass（https://github.com/gruntjs/grunt-contrib-compass）提供的Gruntfile中定义图像和字体的默认目录

这是我项目的Gruntfile中的摘录。只需查看imagesDir部分中的fontsDir和dist行。其余的在您的项目中可能看起来有所不同。

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
    }
  }
}

希望这会有所帮助。