Question

我正在使用Slick Carousel和Zurb Foundation，建议使用它将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有这样的网址：

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

Answer 1

两个变量$slick-font-path和$slick-loader-path仅用作缺失image-url和font-url函数的后备，这通常由Compass提供（请参阅：{{ 3}}）。

您唯一需要做的就是在grunt-contrib-compass（http://compass-style.org/reference/compass/helpers/urls/#image-url）提供的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
    }
  }
}

希望这有帮助。

光滑的Carousel尝试更改文件路径变量

1 个答案: