相关疑难解决方法(0)

更新 - 20140614:

在没有得到这个问题的任何答案之后,或者在github上,我决定提出自己的问题解决方案.我正在使用罗盘来做许多事情,但它的主要功能在于它能够生成图像精灵.大多数其他事情可以使用纯SCSS完成.

因此,我写了西兰花精灵.这与ember-cli使用broccoli-sass内置支持SCSS一起使用,能够满足我的需求.

您可以在此处详细了解该过程.

现在我不再有兴趣将指南针集成到我的ember-cli应用程序中.由于我的解决方案没有直接回答问题(因为它没有使用罗盘),我认为这个问题没有答案.既然这个问题可能会让社区中的其他人有所帮助,那么我将保持这种开放,并且仍将尊重赏金!

更新 - 20140620:

赏金已过期.

原始问题:

在使用西兰花罗盘的ember-cli应用程序中,如何配置以使生成的CSS正确引用图像文件路径,包括生成的图像文件路径？

使用指南针,以下SCSS:

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

...将生成包含.png文件icon夹中所有图像的单个文件,以及用于显示每个图像的CSS.

我希望能够通过ember-cli中的指南针做同样的事情,它使用西兰花 来构建其资产管道.

• 必须在ember-cli中工作 - 也就是说,它必须在ember serve或ember build运行时构建
• 必须使用指南针从图像文件夹生成图像精灵
• 生成的图像应复制到assets文件夹
• 生成的CSS应指向位于assets文件夹中的图像,而不是指向临时树文件夹

到目前为止我的尝试:

#1

app.styles = function() {
  var tree = this.appAndDependencies();
  return compileCompass(tree, {
    outputStyle: 'expanded',
    relativeAssets: false,
    sassDir: this.name+'/styles',
    imagesDir: 'public/images',
    // imagesDir: this.name+'/styles/images',
    cssDir: '/assets',
  });
};

当我这样做时,compass命令失败,因为它无法在树中找到图像文件.

#2

app.styles = …