sass - 使用相对资产/网址在单独的文件夹中编译 SASS 文件？

Question

我有自己的 Grunt/Compass/SASS 项目，其 config.rb 文件具有以下设置：

http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
add_import_path "./bower_components/slick-carousel/slick"

正如您可能猜到的，这里的问题是我试图与其他 sass 文件一起编译的 slick-carousel。没有该组件它可以正常工作。slick-folder 包含以下文件：

./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

编译 slick-theme.scss 时，我收到警告说它找不到通过相对 url 引用的文件。

WARNING: 'slick.woff' was not found (or cannot be read) in /project-root/fonts

有没有办法告诉 Compass/SASS 编译器使用“当前”SASS 文件作为相对路径的基础？所以它会在 /project-root/bower_components/slick-carousel/slick/fonts 中查找？

Answer 1

Slick.js 有它自己的 Sass 变量来处理他的字体 url。因此，您必须像这样为该变量正确分配正确的路径：

// Fonts
$slick-font-path: "./bower_components/slick-carousel/slick/fonts/";

你可以在这里查看所有 slick 的 Sass 变量