css - 如何指向元素目录之外的 Sprite 文件夹?

标签 css sass compass-sass sprite

我在子目录 (/project/sub1/sub2/sub3/sub4/) 中设置了一个 compass 元素。 SCSS 文件位于/project/sub1/sub2/sub3/sub4/css/src ,图像位于/project/sub1/sub2/sub3/sub4/images。

我需要生成一个 Sprite ,其源 PNG 保存在元素外部的目录中 (/project/sub1/sub2/sub3/alternate-sub4/images/global)。我尝试更改 @import 的路径,但在编译 SCSS 时它不断抛出错误,提示“在加载路径中找不到文件..”。

这是我在 _sprites.scss 中的 @import:

@import“/../../../alternate-sub4/images/global/*.png”;

我的config.rb位于/project/sub1/sub2/sub3/sub4/

http_path = "/"
css_dir = "css"
sass_dir = "css/src"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"

有人可以告诉我需要更改什么才能使其正常工作吗?我尝试了许多不同的方法,包括符号链接(symbolic link)和使用 sprite_load_path 指向目录,但似乎没有任何效果。

最佳答案

您可以使用以下配置添加一个额外的路径,Compass 将在其中查找 Sprite :

sprite_load_path << '../alternate-sub4/images'

sprite_load_path << File.expand_path('../alternate-sub4/images')

并在您的 SCSS 文件中导入 PNG 文件:

@import 'global/*.png';

请参阅configuration reference .

注意:
sprite_load_path指令是 Array这就是为什么使用 Ruby 运算符 << 添加路径的原因.

关于css - 如何指向元素目录之外的 Sprite 文件夹?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17197655/

相关文章:

css - 静态 map 功能列表

css - compass Sprite 悬停状态

css - 可以更改不同文件的 SASS/Compass 输出文件夹吗?

sass - 在 Sass 中使用 FontAwesome

sass - 你如何将所有 sass 文件与 webpack 捆绑在一起?

html - Twitter Bootstrap 响应式导航(btn-navbar、icon-bar)颜色变化

html - 文本在 HTML 输入中未正确对齐。我的代码要更改什么?

css - 如何更改选择选项的字体大小?

jquery - P 标签内容覆盖 block 级链接的问题

node.js - ionic - 错误 : Cannot find module 'gulp-sass'