0

我将Slick Carousel与 Zurb Foundation 一起使用，建议使用它来将 css、js 放在根目录中自己的文件夹中，当我像这样设置我的项目时，我可以让它完美地工作。

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

  • 项目根
    • 字体
      • 光滑的.eot
      • 光滑的.svg
      • 光滑的.ttf
      • 光滑的.woff
    • 图片
      • 加载中.gif
    • JS
      • slick.min.js
    • SCSS
      • 光滑的.scss
    • 样式表
      • 光滑的.css

我认为我需要做的就是更改 scss 文件中给出的默认变量：

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

但我尝试的任何方法都没有奏效，编译后的 css 有这样的 url：

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

1 回答 1

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

希望这可以帮助。

于 2015-05-20T23:16:47.673 回答