Question

我疯狂地试图解决这个问题。我在Wordpress项目上使用指南针，并且我将指南针configure.rb文件保存在我的Wordpress主题根目录中。这是我的configure.rb文件：

add_import_path "bower_components/foundation/scss"


http_path = ""
http_images_dir = "images"

css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
relative_assets = true

output_style = :expanded
environment = :development

line_comments = false
color_output = false

目录结构如下：

theme_folder
|
|-css
|-images
|-js
|-scss

configure.rb文件位于主题文件夹中，该文件夹用作项目根目录。当我用罗盘编译下面的scss时：

@import "compass/utilities/sprites";
@import "../images/*.png";
@include all-images-sprites;

@import "compass/utilities/sprites";

@import "../images/*.png";
@include all-images-sprites;

#site-title h1 a {

    @extend .images-logo;

    display: block;
    width: 250px;
    height: 0;
    overflow: hidden;
    padding-top: 73px;
}

我得到以下css：

.images-sprite, .images-logo, #site-title h1 a {
  background: url('../images/../images-s4b3b787fa3.png') no-repeat;
}

正如您所看到的，图片网址确实搞砸了。知道为什么会这样吗？谢谢！

Answer 1

第一句话：由于您使用relative_assets http_path和http_images_dir选项因Compass忽略而无用。

@import指令根据Scss文件的属性project_path和图像的属性images_path加载文件。
要知道属性images_path的值，可以在终端中键入以下命令：

compass config -p images_path

您可以注意到images_path的值为"project_path" + "/" + images_dir。因此，要导入spritesheet，您不必指定images目录的位置但是，基本的，您无法在spritesheet中导入images_dir的所有图像。您必须在位于images_dir目录（即images/icons）目录中的子目录中重新组合spritesheet的图像。

完成此操作后，只需使用指令@import "icons/*.png";导入spritesheet。

替代方式

如果要创建包含整个images_dir目录内容的spritesheet，则必须精确generated_images_dir选项以指向images_dir的其他位置（以避免无限）环）：

css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
generated_images_dir = "."
relative_assets = true

如何更正指南针spritesheet路径？

1 个答案:

替代方式